Скриншот материала «Красивые облака для uCoz»
 |
Красивые облака для uCoz. Использовать их можно как и в фон для сайта, так и как шапку. Эффект очень завораживает и понравится всем пользователям.
Если
картинки пропадут с источника, тогда
скачайте архив с ними, загрузите на свой сайт и пропишите в коде путь до картинок с вашего сайта.
Скрипт сделан на
CSS3 Установка
1. ПУ» Управление дизайном» Таблица стилей
Код
html,body {margin:0; height:100%;}
.sky {
height:100%;
background: no-repeat #007fd5;
position:relative;
overflow:hidden;
-webkit-animation:sky_background 50s ease-out infinite;
-moz-animation:sky_background 50s ease-out infinite;
-o-animation:sky_background 50s ease-out infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0); }
.moon {
background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/moon.png");
position:absolute;
left:0;
height:100%;
width:300%;
-webkit-animation:moon 50s linear infinite;
-moz-animation:moon 50s linear infinite;
-o-animation:moon 50s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0); }
.clouds_one {
background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/cloud_one.png");
position:absolute;
left:0;
top:0;
height:100%;
width:300%;
-webkit-animation:cloud_one 50s linear infinite;
-moz-animation:cloud_one 50s linear infinite;
-o-animation:cloud_one 50s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0); }
.clouds_two {
background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/cloud_two.png");
position:absolute;
left:0;
top:0;
height:100%;
width:300%;
-webkit-animation:cloud_two 75s linear infinite;
-moz-animation:cloud_two 75s linear infinite;
-o-animation:cloud_two 75s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0); }
.clouds_three {
background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/cloud_three.png");
position:absolute;
left:0;
top:0;
height:100%;
width:300%;
-webkit-animation:cloud_three 100s linear infinite;
-moz-animation:cloud_three 100s linear infinite;
-o-animation:cloud_three 100s linear infinite;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0)
; }
@-webkit-keyframes sky_background {
0% {
background: no-repeat #007fd5;
color:#007fd5
; }
50% {
background: no-repeat #000;
color:#a3d9ff
; }
100% {
background: no-repeat #007fd5;
color:#007fd5
; }
}
@-webkit-keyframes moon {
0% {
opacity: 0;
left:-200%
; -moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left:0%
; bottom:250px;
-webkit-transform: scale(1);}
100% {
opacity: 0;
bottom:500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);}
}
@-webkit-keyframes cloud_one {
0% {
left:0
; }
100% {
left:-200%
; }
}
@-webkit-keyframes cloud_two {
0% {
left:0
; }
100% {
left:-200%
; }
}
@-webkit-keyframes cloud_three {
0% {
left:0
; }
100% {
left:-200%
; }
}
@-moz-keyframes sky_background {
0% {
background: no-repeat #007fd5;
color:#007fd5
; }
50% {
background: no-repeat #000;
color:#a3d9ff
; }
100% {
background: no-repeat #007fd5;
color:#007fd5
; }
}
@-moz-keyframes moon {
0% {
opacity: 0;
left:-200%
; -moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
50% {
opacity: 1;
-moz-transform: scale(1);
left:0%
; bottom:250px;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
bottom:500px;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
}
}
@-moz-keyframes cloud_one {
0% {
left:0
; }
100% {
left:-200%
; }
}
@-moz-keyframes cloud_two {
0% {
left:0
; }
100% {
left:-200%
; }
}
@-moz-keyframes cloud_three {0% {left:0; }
100% { left:-200%;} }
2. Куда хотите видеть, вставляете:
Код
<div class="sky">
<div class="moon"></div>
<div class="clouds_one"></div>
<div class="clouds_two"></div>
<div class="clouds_three"></div>
</div>
Красивые облака для uCoz 
