Анимированные облака на CSS3

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
CabinetAdmin

Анимированные облака на CSS3

CabinetAdmin 16 фев 2016, 19:35 Сообщение

Попалась мне на глаза очень интересная модификация, позволяющая создать плывущие по небу облака.

Анимированные облака на CSS3 - clouds.png


Реализация довольно простая, структура представляет собой четыре блока:

Код: Выделить всё

<div class="sky"> <div class="moon"></div> <div class="clouds_one"></div> <div class="clouds_two"></div> <div class="clouds_three"></div> </div>


К каждому блоку с помощью стилей присвоено своё изображение, часть облаков:

Код: Выделить всё

.sky { height: 480px; background: #007fd5; position: relative; overflow-x: 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: url("images/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: url("images/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: url("images/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: url("images/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) }

и с помощью css анимации приведены в движение:

Код: Выделить всё

@-webkit-keyframes sky_background { 0% { background: #007fd5; color: #007fd5; } 50% { background: #000; color: #a3d9ff; } 100% { background: #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: #007fd5; color: #007fd5; } 50% { background: #000; color: #a3d9ff; } 100% { background: #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%; } }


Итоговый результат для простой страницы выглядит так




Чтобы прикрутить данную модификацию к форуму нужно отредактировать хедер, находим в нём:

Код: Выделить всё

<body id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}">

добавляем к нему новый класс и новые элементы:

Код: Выделить всё

<body id="phpbb" class="sky nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} {BODY_CLASS}"> <div class="moon"></div> <div class="clouds_one"></div> <div class="clouds_two"></div> <div class="clouds_three"></div>

Добавляем приведённые выше стили, плюс добавляем к ним:

Код: Выделить всё

html { background-color: transparent; } body { background: #007fd5; } #wrap { position: relative; }


Файлы
animated-clouds.rar
(774.66 КБ) 317 скачиваний
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект


Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 3 гостя