Попалась мне на глаза очень интересная модификация, позволяющая создать плывущие по небу облака.
Анимированные облака на 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 КБ 588 скачиваний
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.