Домой / Рецепты CSS / Смесь CSS фона и анимации
Смесь CSS фона и анимации

Смесь CSS фона и анимации

В данном примере показан пример создания фона с эффектом анимации с помощью CSS. Изменяя свойство animation можно уменьшать и увеличивать скорость анимации облаков.

 

Демо

CSS

html, body {
 width: 100%; height: 100%;
}

body {
 background: url(http://etc-mysitemyway.s3.amazonaws.com/webtreats/assets/posts/724/full/tileable-cloud-patterns-2.jpg), url(http://www.shedexpedition.com/wp-content/uploads/2014/05/K2-Mountain-2.jpg) no-repeat center center fixed;
 -webkit-background-size: auto,cover;
 background-size: auto,cover;
 
 -webkit-background-blend-mode: multiply, normal;
 background-blend-mode: multiply, normal;
 
 -webkit-animation: bgAnim 10s linear infinite;
 animation: bgAnim 10s linear infinite;
}

@keyframes bgAnim {
 from {
 background-position: 0px 0%, center center;
 }
 to {
 background-position: -1024px 0%, center center;
 }
}

@-webkit-keyframes bgAnim {
 from {
 background-position: 0px 0%, center center;
 }
 to {
 background-position: -1024px 0%, center center;
 }
}

В данном примере показан пример создания фона с эффектом анимации с помощью CSS. Изменяя свойство animation можно уменьшать и увеличивать скорость анимации облаков.   CSS html, body { width: 100%; height: 100%; } body { background: url(http://etc-mysitemyway.s3.amazonaws.com/webtreats/assets/posts/724/full/tileable-cloud-patterns-2.jpg), url(http://www.shedexpedition.com/wp-content/uploads/2014/05/K2-Mountain-2.jpg) no-repeat center center fixed; -webkit-background-size: auto,cover; background-size: auto,cover; -webkit-background-blend-mode: multiply, normal; background-blend-mode: multiply, normal; -webkit-animation: bgAnim 10s linear infinite; animation: bgAnim 10s linear infinite; } @keyframes bgAnim { from { background-position: 0px 0%, center center; } to { background-position: -1024px 0%, center center; } } @-webkit-keyframes bgAnim { from { background-position: 0px 0%, center center; } to…

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.33 ( 3 голосов )
100

Оставить комментарий

Ваш email не будет опубликован.

*