Анимация background CSS: движущиеся облака

HTML и CSS WordSmall

С помощью только одних правил стилей CSS, можно добиться очень интересной анимации различных элементов. Вот есть яркий пример на основе плагина для WordPress Animate It! или отдельная анимация иконок. А также еще примеры с border анимацией, текста и многое, многое другое.

А в этом кратком обзоре сделаем анимацию background в виде движущихся облаков, которую можно было бы использовать в качестве шапки сайта. Получится очень стильно и динамично, а если проявить интерес, то возможно добавить какой-то летающий объект: дирижабль, самолет, воздушный шар и т.д.

анимация фона

Демо Скачать

<div class="satic-area">
  <header class="top-header">
    <h1>Анимация background css <span>A Background Image Animation</span></h1>
  </header>
  <div class="dynamic-area1"></div>
  <div class="dynamic-area2"></div>
</div>
/* Header */
.top-header{
        padding: 1em 0 1em;
        letter-spacing: -1px;
        text-align: center;
}
.top-header h1 {
        color: #fff;
        font-weight: 600;
        font-size: 3em;
        line-height: 1;
        margin-bottom: 0;
        text-shadow: 2px 5px rgba(0,0,0,0.1);
}
.top-header h1 span {
        display: block;
        font-size: 60%;
        font-weight: 400;
        padding: 0.8em 0 0.5em 0;
        color: #fff;
}
/*stop. Header */

.satic-area {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../img/poster-about.jpg) no-repeat center;
  background-size: cover;
}

.dynamic-area1   {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/poster-drop-animate2.png) repeat-x 0px 0px;
  background-size: cover;
  -webkit-animation: posterDrop1 6000s linear infinite;
     -moz-animation: posterDrop1 6000s linear infinite;
       -o-animation: posterDrop1 6000s linear infinite;
          animation: posterDrop1 6000s linear infinite;
}

@-webkit-keyframes posterDrop1 { from { background-position: 0 0; } to { background-position: 4000% 0; }  }
   @-moz-keyframes posterDrop1 { from { background-position: 0 0; } to { background-position: 4000% 0; }  }
     @-o-keyframes posterDrop1 { from { background-position: 0 0; } to { background-position: 4000% 0; }  }
        @keyframes posterDrop1 { from { background-position: 0 0; } to { background-position: 4000% 0; }  }

.dynamic-area2   {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/poster-drop-animate1.png) repeat-x 0px 0px;
  background-size: cover;
  -webkit-animation: posterDrop2 8000s linear infinite;
     -moz-animation: posterDrop2 8000s linear infinite;
       -o-animation: posterDrop2 8000s linear infinite;
          animation: posterDrop2 8000s linear infinite;
}
@-webkit-keyframes posterDrop2 { from { background-position: 0 0; } to { background-position: 30000% 0; }  }
   @-moz-keyframes posterDrop2 { from { background-position: 0 0; } to { background-position: 30000% 0; }  }
     @-o-keyframes posterDrop2 { from { background-position: 0 0; } to { background-position: 30000% 0; }  }
        @keyframes posterDrop2 { from { background-position: 0 0; } to { background-position: 30000% 0; } }
Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code