Анимация звездопада на CSS

Анимация звездопада на CSS

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

Пример

HTML


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

CSS


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