Реалистичные облака на CSS3 - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Кому на Руси жить хорошо?
Всего ответов: 851
Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Гости Пользователи
Дополнительно
Главная » Скрипты для сайта » Разные скрипты

Реалистичные облака на CSS3

Хочешь сказать спасибо? Кликни на рекламный баннер.

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


Все материалы в архиве.





Если у Вас возникли вопросы по установке или работе скрипта, то задайте их в комментариях и мы постараемся вам помочь.

Источник материала: Неизвестен/Не указан
При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:
Добавил: -angel- | Просмотров: 9643 | Загрузок: 929 | Комментарии: 22 | Рейтинг: 4.2/43
Теги: CSS, скрипт, облака на css, анимация на css
Всего комментариев: 221 2 »
Сообщение №18 от ЛИдия
Добавлен: 01.11.2015

Доброго времени суток!
Вы не можете подсказать как сделать так, чтобы облака непрерывно летели.
Спасибо!
Сообщение №19 от Олег
Добавлен: 01.11.2015

Здравствуйте !
Я не совсем понял ваш вопрос, облака и так летят непрерывно.
Или вы хотите чтобы были ТОЛЬКО облака, тогда класс .moon и другие скройте (display:none;)
.moon { display:none;
background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/moon.png");
position:absolute;
left:0;
height:100%; ............
Сообщение №20 от ЛИдия
Добавлен: 01.11.2015

Да, moon уже скрыла. Проблема в том, что остается пустое место пока облака не доплывут до конца влево.
Ссылка скрыта Администратором !
Сообщение №21 от ЛИдия
Добавлен: 04.11.2015

Получается, что остается время на сайте, когда облака влево еще летят, а справа не появляются...и какое-то время их еще нет на сайте, прежде, чем снова появляются. sad
Сообщение №22 от Олег
Добавлен: 06.11.2015

Простите за долгий ответ, командировки. Поиграйтесь со временем сами.
Сообщение №12 от Юрий
Добавлен: 02.01.2015

В просьбе помог. Чем помог..? Кликал на рекламные баннеры. )
Блин.. все таки со своей проблемой поспешил.. пока занят переводом разделов файла index.css Уже перевел, теперь выясняю в какой именно раздел index.css
нужно вставить код. Но пока еще немало не ясного.
Сообщение №14 от Олег
Добавлен: 02.01.2015

В просьбе помог. Чем помог..? Кликал на рекламные баннеры.

Я вообще ничего не понял. ВЫ О ЧЁМ ???
Сообщение №15 от Юрий
Добавлен: 02.01.2015

Да господи! Просто увидел и кликнул безо всякой задней мысли и все.
ежели вам это нужно было, то ради бога..)
Сообщение №17 от Олег
Добавлен: 03.01.2015

А вот Вы о чём, СПАСИБО.
Сообщение №11 от Юрий
Добавлен: 02.01.2015

Здравствуйте Олег.
Предоставленный Вами чудесный скрипт, я попытался воплотитьу себя на сайте сверху "шапки". К сожалению ничего не вышло..
В SMF файл стилей - это index.css Вот его начальные строки



я и вставил ваш скрипт, соблюдая синтаксис, открывающие/закрывающие но теги.. никаких изменений.
Если Вас не затруднит поясните пожалуйста что сделано не так как нужно?
С Уважением hummingbird

PS. Не знаю можно ли у вас привести код в полном обьеме, ведь он займет
немало места.
Сообщение №13 от Олег
Добавлен: 02.01.2015

Что это за код и откуда он.
В данном скрипте (Реалистичные облака на CSS3) нет таких строк.
Сообщение №16 от Юрий
Добавлен: 02.01.2015

Извините Олег.
Этот код совсем не имееет никакого отношения к вашему коду. Это код/шаблон из "движка" smf в котором видимо нужно применить ваш код. И все.
Но вы рекомендуете вставить его в css Пытался, ничего не вышло.
Видимо различия существенны и осуществить его на практике не по силам дилетанту вроде меня. Уберите пожалуйста что я написал лишнее.
Более Вас беспокоить не стану.
С Ув. hummingbird
Сообщение №6 от Юрий
Добавлен: 27.12.2014

Фантастика! Изумительно, просто нет слов… по моему скромному мнению это один из самых лучших скриптов. Скрипты видел разные, но такой красоты нет.
Создателю этого чуда - большое уважение!
ps. Ответьте пожалуйста на какой платформе ваш сайт, myBB?
я более знаком с платформой SMF, язык скриптов php - идентичен.
но вот со вставкой в соответствующие места испытываю определенные трудности.
С Уважением hummingbird
Сообщение №7 от Олег
Добавлен: 28.12.2014

Здравствуйте !
Мой сайт ВРЕМЕННО находиться на Ucoz.
В скором времени сайт будет переезжать.
Сообщение №9 от Юрий
Добавлен: 28.12.2014

Здравствуйте Олег! Переезжать?
Если переезд на пользу сайту.. приятно слышать!
Надеюсь мы переедем вместе с вами, и вы не оставите нас? ))
Гуд лак!
Сообщение №10 от Олег
Добавлен: 28.12.2014

Здравствуйте Юрий !
Да дороговато стало содержать сайт на Ucoz.
При переезде всё останется, так как есть.
У меня много чего интересного в запасе, но пока нет времени.
Сообщение №5 от Валерий
Добавлен: 02.01.2014

Сделайте пожалуйста под фон сайта!
Сообщение №8 от Олег
Добавлен: 28.12.2014

Под фон какого сайта ???
Сообщение №3 от Антон Ромашко
Добавлен: 18.09.2013

Здравствуйте. Объясните подробнее куда в редакторе HTML вставить код для замены шапки.
Сообщение №4 от Олег
Добавлен: 18.09.2013

Попробуйте найти в Панели Управления "Верхний контейнер" и вставить туда.
1-6 7-7
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

В 1880 году кокаин свободно продавался для лечения простуды, невралгии, головной боли и бессонницы.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта