ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимация движущиеся облака фона в CSS

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

Теперь при помощи стилей CSS, можно исполнить отличный анимационный фон, как движущие или вплывающее облако, который идет оригинальном виде. Теперь есть возможность добавлять различные анимации, которые будут отличиться от других. Если здесь исполнены облако на синем фоне, то самостоятельно можно задать им скорость.

Вообще если кратко, то создаем красивый образ анимации background, которые можно задействовать, как на полноценный фон, так и в отдельном блоке, виде в верха сайта. Где безусловно все смотрится стильно и уникально в своей динамике, что при заходе на сайт гости оценят такой стиль на ресурсе.

Проверялось на тестовой площадке на работоспособность, где идет описание, что можно свое написать или все очистить, чтоб остался красивый вид.

Приступаем к установке:

HTML

Код

<div class="kepagsingas-departners">
  <header class="goalodyou-sewebsgus">
  <h1>Анимация background css <span>Анимация фонового изображения</span></h1>
  </header>
  <div class="godyou-cansedegas"></div>
  <div class="gucanugem-podegas"></div>
</div>

CSS

Код

.goalodyou-sewebsgus{
  padding: 1em 0 1em;
  letter-spacing: -1px;
  text-align: center;
}
.goalodyou-sewebsgus h1 {
  color: #f3f1f1;
  font-weight: 600;
  font-size: 3em;
  line-height: 1;
  margin-bottom: 0;
  text-shadow: 2px 5px rgba(14, 14, 14, 0.1);
}
.goalodyou-sewebsgus h1 span {
  display: block;
  font-size: 58%;
  font-weight: 400;
  padding: 0.8em 0 0.5em 0;
  color: #f9f9f9;
}
/*stop. Header */

.kepagsingas-departners {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(http://zornet.ru/ABVUN/Abas/movourebsite.jpg) no-repeat center;
  background-size: cover;
}

.godyou-cansedegas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(http://zornet.ru/ABVUN/Abas/zaredsund.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; } }

.gucanugem-podegas {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(http://zornet.ru/ABVUN/Abas/kaserupukin.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; } }

Также есть похожий вариант фона, где аналогично проплывают облако, но совершенно в другом ракурсе все преподнесено, что возможно этот вариант более подойдет.

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

16 Января 2019 Загрузок: 2 Просмотров: 2124 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0