Эффект чарующий взгляд, выглядит все реалистично, а главное, красиво. В этом скрипте используются картинки, поэтому и выглядит все реально. Это пример того, как можно реализовывать свои идеи средствами 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>



http://uploads.ru/i/K/b/k/Kbk67.png

пароль к архиву

2dpower.top

Demo