Анимация облаков на CSS

Анимация облаков на CSS

Анимация облаков может пригодиться для шапки сайта, либо для баннера. Анимация на CSS не нагрузит сайт и придаст ему уникальный дизайн. Цвет фона и облака можно заменить на другие.

Пример

HTML


<div class="animation-bg">
  <div class="bg-ex-sky"></div>
</div>

CSS


.animation-bg{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #042548;
  height: 350px;
}
.bg-ex-sky {
  background: url('image.png'); /* Путь к картинке */
  background-position: 0 0;
  background-repeat: repeat;
  animation: animated-sky 60s linear infinite;
  width: 100%;
  height: 350px;
}
@keyframes animated-sky {
  from { background-position: 800px 0; }
  to { background-position: 0 0; }
}
By julia