Облака CSS3

Облака CSS3

02012-07-1043572Денис Абдуллин

Эффект чарующий, выглядит все реалистично, а главное, красиво. Облака CSS3 используют изображения, оттого-то и выглядит все реалистично. На самом деле это пример того, каакую анимацию можно сделать на CSS3. В примере не просто цикличное движение облака, тут так же есть смена времени суток: ночью становится темно и появляется луна. Такой эффект можно использовать как, например, в шапке сайта, так и в качестве фона.

Код HTML

Code

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

Код CSS

Code

<style type="text/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("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("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)
  }
  /* yraaa.ru */
  .clouds_two {
  background: no-repeat url("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)
  }
  /* yraaa.ru */
  .clouds_three {
  background: no-repeat url("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);
  }
  }

  /* yraaa.ru */

  @-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%
  }
  }
</style>

Демо страница

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!

Комментарии (2)

Порядок вывода комментариев:

Гость 2012-07-11 в 10:51 / МатериалСпам

Ага, будет круто

0

Алекс 2012-07-10 в 21:41 / МатериалСпам

А вот это шедеврально ! :) Можно даже ка кбэкгроунд прикрутить в блогу

0

Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.

Создать сайт
на uCoz бесплатно Обзор и отзывы

Конструктор сайтов

Рейтинг лучших сервисов для самостоятельного создания сайта.

Лучшие конструкторы

Создать свой сайт бесплатно?

Легко! Если пользоваться нашими советами.

Создать сайт