Вашему вниманию стильно оригинальный фон, который полностью анимированный под плавное движение анимации, что все создано с помощью CSS3. Безусловно здесь присутствует динамика, которая изначально задается анимацией, но главное, что не нужно использовать JS скрипты. Идет в ярко желтом оттенке, где как раз на таком фоне медленно будут проплывать облака. Здесь задействовано @keyframes, что будет содержать имя анимации элемента. Также подключено свойство animation-duration, оно отвечает за продолжительность, что при просмотре не будет не каких обрывов, а все плавно переходить При создании интернет ресурса, который основан на анимации, то это безусловно будет отличное привлечение внимание, а также помогает вашему сайту достичь огромной популярности, но точно он будет заметен и отличатся от других. Если смотреть объективно, то само перемещение облачной анимации на интернет портале в значительной степени привлекает больше пользователей, что, следовательно, отразится на просмотрах, которые будут в плюс. Но главное не забывать что нужно ставить по тематике, так, чтоб сам дизайн отлично вписывался. Приступаем к установке: HTML Код
<div id="Canakepage"> <div class="Cesukolpam Fonbukoding"></div> <div class="Cesukolpam Bencodekab"></div> <div class="Cesukolpam Fonbukoding"></div> <div class="Cesukolpam Bencodekab"></div> <div class="Cesukolpam Fonbukoding"></div> <div class="Cesukolpam Bencodekab"></div> <div class="Cesukolpam Bencodekab"></div> <div class="Cesukolpam Fonbukoding"></div> <div class="Cesukolpam Bencodekab"></div> <div class="Cesukolpam Bencodekab"></div> </div>
CSS
Код
html,body{margin:0;padding:0} html{height:100%} body{min-height:100%;color:#FFF;background-color:#FD940A;background-image:radial-gradient(circle,#F9A72B 0%,#FA9026 70%,#FB6C1F 100%)} #Canakepage{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;height:30%;overflow:hidden;-webkit-animation:FadeIn 3s ease-out;animation:FadeIn 3s ease-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} @-webkit-keyframes FadeIn { from{opacity:0} to{opacity:1} } @keyframes FadeIn { from{opacity:0} to{opacity:1} } .Cesukolpam{position:absolute;width:100%;background-repeat:no-repeat;background-size:auto 100%;height:70px;-webkit-animation-duration:120s;animation-duration:120s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:Float,FadeFloat;animation-name:Float,FadeFloat;z-index:1} .Cesukolpam.Fonbukoding{height:10%;min-height:20px;z-index:3} .Cesukolpam.Bencodekab{height:9.09090909%;min-height:8px;-webkit-animation-duration:210s;animation-duration:210s} @-webkit-keyframes Float { from{-webkit-transform:translateX(100%) translateZ(0);transform:translateX(100%) translateZ(0)} to{-webkit-transform:translateX(-15%) translateZ(0);transform:translateX(-15%) translateZ(0)} } @keyframes Float { from{-webkit-transform:translateX(100%) translateZ(0);transform:translateX(100%) translateZ(0)} to{-webkit-transform:translateX(-15%) translateZ(0);transform:translateX(-15%) translateZ(0)} } @-webkit-keyframes FadeFloat { 0%,100%{opacity:0} 5%,90%{opacity:1} } @keyframes FadeFloat { 0%,100%{opacity:0} 5%,90%{opacity:1} } .Cesukolpam:nth-child(10){-webkit-animation-delay:-184.61538462s;animation-delay:-184.61538462s;top:60%} .Cesukolpam.Fonbukoding:nth-child(10){-webkit-animation-duration:80s;animation-duration:80s;height:35%} .Cesukolpam.Bencodekab:nth-child(10){-webkit-animation-duration:110s;animation-duration:110s;height:-3.40909091%} .Cesukolpam:nth-child(9){-webkit-animation-delay:-166.15384615s;animation-delay:-166.15384615s;top:54%} .Cesukolpam.Fonbukoding:nth-child(9){-webkit-animation-duration:84s;animation-duration:84s;height:32.5%} .Cesukolpam.Bencodekab:nth-child(9){-webkit-animation-duration:114s;animation-duration:114s;height:-2.15909091%} .Cesukolpam:nth-child(8){-webkit-animation-delay:-147.69230769s;animation-delay:-147.69230769s;top:48%} .Cesukolpam.Fonbukoding:nth-child(8){-webkit-animation-duration:88s;animation-duration:88s;height:30%} .Cesukolpam.Bencodekab:nth-child(8){-webkit-animation-duration:118s;animation-duration:118s;height:-.90909091%} .Cesukolpam:nth-child(7){-webkit-animation-delay:-129.23076923s;animation-delay:-129.23076923s;top:42%} .Cesukolpam.Fonbukoding:nth-child(7){-webkit-animation-duration:92s;animation-duration:92s;height:27.5%} .Cesukolpam.Bencodekab:nth-child(7){-webkit-animation-duration:122s;animation-duration:122s;height:.34090909%} .Cesukolpam:nth-child(6){-webkit-animation-delay:-110.76923077s;animation-delay:-110.76923077s;top:36%} .Cesukolpam.Fonbukoding:nth-child(6){-webkit-animation-duration:96s;animation-duration:96s;height:25%} .Cesukolpam.Bencodekab:nth-child(6){-webkit-animation-duration:126s;animation-duration:126s;height:1.59090909%} .Cesukolpam:nth-child(5){-webkit-animation-delay:-92.30769231s;animation-delay:-92.30769231s;top:30%} .Cesukolpam.Fonbukoding:nth-child(5){-webkit-animation-duration:100s;animation-duration:100s;height:22.5%} .Cesukolpam.Bencodekab:nth-child(5){-webkit-animation-duration:130s;animation-duration:130s;height:2.84090909%} .Cesukolpam:nth-child(4){-webkit-animation-delay:-73.84615385s;animation-delay:-73.84615385s;top:24%} .Cesukolpam.Fonbukoding:nth-child(4){-webkit-animation-duration:104s;animation-duration:104s;height:20%} .Cesukolpam.Bencodekab:nth-child(4){-webkit-animation-duration:134s;animation-duration:134s;height:4.09090909%} .Cesukolpam:nth-child(3){-webkit-animation-delay:-55.38461538s;animation-delay:-55.38461538s;top:18%} .Cesukolpam.Fonbukoding:nth-child(3){-webkit-animation-duration:108s;animation-duration:108s;height:17.5%} .Cesukolpam.Bencodekab:nth-child(3){-webkit-animation-duration:138s;animation-duration:138s;height:5.34090909%} .Cesukolpam:nth-child(2){-webkit-animation-delay:-36.92307692s;animation-delay:-36.92307692s;top:12%} .Cesukolpam.Fonbukoding:nth-child(2){-webkit-animation-duration:112s;animation-duration:112s;height:15%} .Cesukolpam.Bencodekab:nth-child(2){-webkit-animation-duration:142s;animation-duration:142s;height:6.59090909%} .Cesukolpam:nth-child(1){-webkit-animation-delay:-18.46153846s;animation-delay:-18.46153846s;top:6%} .Cesukolpam.Fonbukoding:nth-child(1){-webkit-animation-duration:116s;animation-duration:116s;height:12.5%} .Cesukolpam.Bencodekab:nth-child(1){-webkit-animation-duration:146s;animation-duration:146s;height:7.84090909%} .Cesukolpam{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAABgCAYAAACTzNnjAAAFCklEQVR42u3d34uVRRjA8YMsEi0iSwhdRBGhSJgZiNRFIkWhQVEXBipKUVBBLCF6k0h4UxFkBLq4QT/Qiyi80EgxCjXMWqOMtqy0bBNja92yXatN3c3pGc9sHU/v+X3emWfe93vx+QN23u+e95x5Z94pmNWFQo5NEytErzgoBsSIOCf+FqbEBTEhzophcVTsFxvFEjE152PZHGMukbcB6BAPij0uqgtl0bXCBvyjeFPcS2wEWc0y0ec++Ywnf7rwbyc8grQ6RY8Y9RhhJT+Jde4TmghzFuR08bo4ryDEpE/N58QUYsx+kFPcD4yzCkMsZz+1uwkyu0HeKYYiCLHcN2I2QWYnSPudbHubfy37NuFu4wQZeZD2k2Uw4hDLHRZdBBnnH3K/5ykcX86IeQQZl6civ0XXYv/RlhJkHLZkOMTypz7dBKnbyzmJsfTZeTdB6vRszmIsjXI5QeryWMa/M9ZinzjdTJA63CLGcxzjpD/ElQQZfq3iKDFe8lSHIAPqI8L/6SHIMB4nvorTQQsI0v+teoz4KjpBkH7tIrqaNhCkH9cnbK5C8q/uywiSHzKabCLIdM3K+QR4o8YysfVWcZDvElnD1hNkOi5XuilLu5MlOyzni3vESnGfWCRuIMjm1zgSWPM7GWvNXdonXkdM8Q0dCwmytu8Iy/vK9B3iRoJMnghnqifc8jb7yXkXQf5nLWGo2WR2HUGuLrxPDKq25D6d9yBPE4I6/e6rVO6CnMpkuFq/eLmFKwtyMRde/dOg2XkKkvlH/X5P9ZNSWZBvcMGjMJza6iJlQe7nYkfjozwE+TkXOiprsx7kES5yVOzLYK/IcpA/cJGj806Wg/yaCxzlzsersxpkPxc4SruzGuQBLm603yU7DPOQUOSJWIK0E6j2lcvPm+JJVp+674oDbiFuv5t/fEXs5cJG65DmIO3KY3vG3yCLbXO1N1xVkB3uWfQQFye3rtUS5DN1bC5C9j0cOki7XOwUFwJOb6gg7TmCW1lMizI7QwQ5nW2qqGCv7yDtwsxfGXhU0OczyKvECIOOKvb5CnKa2+TDoKOat3wFyaIH1ONFH0H2MNCo00NpBzmXR39owIy0gzzOIKNOv6X9LHsZg4wGp3xsM/ZMoUfF3aaZ4++qBDnIIKMNzrsHKb11Lb6oEORtDCRSYB81f+vWxzYUJBv2kTYb5vx6gzzHgMHTjsUXagV5BwMFzz78d5NYQpDbGCAEcOzissaEIL9kcBDIx0lBsrwMIW0uD3KcQUHgqaEFpUGyLQGhnSgNkgGBBg8QJDQ5Phkky82g5bvkNQXDscDQY6MNcpiBgBL9NsjDDAS0LPq1Qb7EQECJicLFSUkGAkpMLgMaYzCgKci3GQxomPqZDPImBgMa9uOULifnDWcI7VRpkIsYEAR2sHwX2GcMCgJak/QKPh4lIsgcpOhM2iv7JIODAPqqvY7vPQYInlf6zKsWpN2iOMBAwZMD9bzSudPwvh+kr3gofJ0vve/ikxIp36pXNHosiD2j5gMGD2ksyG3lJK917qc5A4l2eNW04Wi5OaZ41DADilZu0xtMmw/fXCV+ZnDRoFFTfBdpaudlLxVfsXMRNYy7W3SH8XSAu/01bo8s/kL8xQWAM+JC7DIeDnCvZqZ4RGxxi3/3iUPOJ+5TtRXfG/v6jeadNMVjlqsZquG0uwU164ybg2vFuPuh2ax23tkm3N91VLwmbjVNvPT+H7Ro4730ITNPAAAAAElFTkSuQmCC)} .Cesukolpam.Bencodekab{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAAAqCAYAAAAUJM0rAAACFUlEQVRo3u3aPSwDYRzH8UZEbAYiYrDYjLZGpIPBJLGwSKwi0k1iYBKDdFJsEiMxSZgsFZJGiGjqJWEhSKuaNKRUG8r5PfI8SXOud72+PH2eu2f47Ndv7+V5/nee/G6bh5MWmIV9iEMWvkGjfiADD7AHk9BU6+PSNK0kPAINwwXkC6KU6gvC4HVyKB/clhHHCDnbTqHbSaEaYIv+OK3KyBk274RQrXBXg0B6B/QPkTIUiZTiEIm5gkbZQjXTJ5nG2ZFsocJ1iMQEZQk1VcdIGl2L9Yoeitwj3uocirgRPVRAgEjMoMihkgKFStIzK063QVHYhKF6h/IKFMlKGpaNlhM8Qq1JFIp5gQHeoSIShmJPST/PUElJQ7FN9hivUGmJQxE56OQRKiN5qL/NNY9QKQeEIpdgR7VC9cEqHeGeUyEHXHrMUiWhyKx6BV4dEsNMtNxQI4Ls33h5LidUoEYjXKEXoXZDLbgsEBOzE8qne8fmJhE7oWIujUQcwhyMmy0VSKRRF0cyWlclYMYo1LEKZOgRugpDpVWUot5ZLI8LlwN23bNQKoY1vwpVmmsS6kOFsPRJQl2qENZIqGkVwnp9xb5nUksEcxm2hZlQMcy3OYXTgx0VpOi2pl8/jwqpMP9sF5twBl08ctE7I/dws5l5D5y4OBj51HvdzluYdlik0RL06cjkKpSlB1Span5x/AQb5Hfrxyy/oU5ISeVw53AAAAAASUVORK5CYII=)}
Что по весу фона, то здесь все выставлено на чистых стилях. Демонстрация