Эффект чарующий взгляд, выглядит все реалистично, а главное, красиво. В этом скрипте используются картинки, поэтому и выглядит все реально. Это пример того, как можно реализовывать свои идеи средствами CSS3. Посмотрите ДЕМО пример и Вы убедитесь в красоте данного скрипта. Скрипт можно использовать как фон сайта либо в виде шапки. Время движения настраивается в стилях CSS. Вообщем где Вы будете использовать скрипт решать Вам.
Итак приступим к установке:
Это в CSS ( ПУ» Управление дизайном» Таблица стилей ):
Код:
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%;} }
HTML код вставьте туда куда Вам нужно:
Код:
<div class="sky"> <div class="moon"></div> <div class="clouds_one"></div> <div class="clouds_two"></div> <div class="clouds_three"></div> </div>
пароль к архиву
2dpower.top
