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

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

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

Пример

HTML


<div class="stars">
  <div class="stars_1"></div>
  <div class="stars_2"></div>
  <div class="stars_3"></div>
</div>

CSS


.stars {
  position: relative;
  overflow: hidden;
  height: 350px;
  margin-bottom: -350px;
  background: #042548;
}
.stars_1, .stars_2, .stars_3{
  position: absolute;
  top: 0;
  left: 0;  
  width: 100%;
  height: 100%; 
  opacity: 0;  
  background: url('image1.png');  
  -webkit-animation: stars 5s linear infinite;
  animation: stars 5s linear infinite;
}
.stars_2 {
  background-position: 100px 100px;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.stars_3 {
  background-image: url('image2.png');
  background-position: 350px 100px;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
@-webkit-keyframes stars {
  0%, 50%, 100% {opacity: 0;}
  1%, 49% {opacity: 1;}
}
@keyframes stars {
  0%, 50%, 100% {opacity: 0;}
  5%, 45% {opacity: 1;}
}
By julia