Главная » Файлы » Всё для сайта » Скрипты
Реалистичные облака на CSS3
[ · Скачать удаленно () · Скриншот ] 09.06.2013, 14:44

Эффект чарующий взгляд, выглядит все реалистично, а главное, красиво. В этом скрипте используются картинки, поэтому и выглядит все реально. Это пример того, как можно реализовывать свои идеи средствами CSS3. Посмотрите ДЕМО пример и Вы убедитесь в красоте данного скрипта. Скрипт можно использовать как фон сайта либо в виде шапки. Время движения настраивается в стилях CSS.
Эффект чарующий взгляд, выглядит все реалистично, а главное, красиво. В этом скрипте используются картинки, поэтому и выглядит все реально. Это пример того, как можно реализовывать свои идеи средствами 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>


Все материалы в архиве.
Категория: Скрипты | Добавил: Ze∆dDe∆d | Теги: скрипты для ucoz, Скачать скрипты для ucoz, скрипт для ucoz
Просмотров: 764 | Загрузок: 182 | Рейтинг: 4.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]