Облака CSS3

Облака CSS3

02012-07-1042772Денис Абдуллин
Эффект чарующий, выглядит все реалистично, а главное, красиво. Облака 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
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.