На портале уже 563 , зарегистрировано 9843 и написано 803 .
Анекдот Дня информер...
Суперский скрипт мин...
Counter Strike шабло...
Гостевая книга
Требуется персонал!
Главная страница Архив всех материалов Скрипты для uCoz - Scripts for uCoz Красивые облака для uCoz

Красивые облака для uCoz

  • Добавил: B_boy_VenOm
  • Дата: 2017-09-20, 3:25 AM
  • Комментариев: 5
  • Просмотров: 1403
Скриншот материала «Красивые облака для 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» из раздела «Скрипты для uCoz - Scripts for uCoz» является уникальной собственностью проекта www.ucozzz.ru, поэтому, при частичном или полном копировании, Вы обязаны установить ссылку на наш портал, как источник материала.
№5 uaroman написал: 2013-12-16 в 11:53 PM Спам
uaroman
надо попробовать
№4 бумер написал: 2013-12-11 в 9:05 PM Спам
бумер
спасибо!!! прикольно получилось
№3 medion123 написал: 2013-12-03 в 3:22 PM Спам
прикольный будет фон
№2 komotoz написал: 2013-12-01 в 6:21 PM Спам
Попробовал, получилось, спс :laugh:
№1 Evgeni3353 написал: 2013-10-12 в 7:12 PM Спам
Теперь вам не надо покупать ключи для онлайн игры FlatOut 3.
Просто скачайте ключи бесплатно http://u.to/H329BA
В архиве 100 ключей.
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]