CSS3 анимация звездного ночного неба

Несколько экспериментов над фоном и его анимацией с помощью только CSS3. Статичный и анимированный фон звездного неба и анимированный фон падающего снега.

HTML

А разметки нет.
Фон формируется полностью с помощью CSS3 свойств.

CSS

Рисуем звезду с помощью CSS3

Прежде чем начать работу с CSS3 анимацией keyframe, мы должны нарисовать "звезду" без использования изображения. "Звезду" можно легко создать с помощью CSS3 градиентов. В нашем случае будем использовать Радиальные Градиенты.

body {
   background-color: black;
   /* Webkit */
   background-image: -webkit-gradient(radial, 50% 50%, 2, 50% 50%, 40, from(white), color-stop(0.1, rgba(248,255,128,.5)), to(transparent) );
   /* Firefox */
   background-image: -moz-radial-gradient(circle, #FFFFFF 2px, rgba(248,255,128,.5) 4px, transparent 40px);
}

Вот примерно такую звездочку вы получите. Цвета конечно же можно поправить в выше приведенном коде.

CSS фон из звезд

Следующим шагом будет заполнение звездочками нашего ночного неба. Это самая сложная часть в примере. Мы должны задать различные значения позиционирования звезд. Если вы подберете подходящие значения, то результат будет просто великолепным, и наоборот. В этот раз мы будем использовать новый CSS3 фон

body {
   background-color: black;
   /* Webkit */
   background-image:
      -webkit-gradient(radial, 50% 50%, 2, 50% 50%, 40, from(white), color-stop(0.1, rgba(248,255,128,.5)), to(transparent)),
      -webkit-gradient(radial, 50% 50%, 1, 50% 50%, 30, from(white), color-stop(0.1, rgba(255,186,170,.4)), to(transparent)),
      -webkit-gradient(radial, 50% 50%, 1, 50% 50%, 40, from(rgba(255,255,255,.9)), color-stop(0.05, rgba(251,255,186,.3)), to(transparent)),
      -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 30, from(rgba(255,255,255,.4)), color-stop(0.03, rgba(253,255,219,.2)), to(transparent));
   /* Firefox */
   background-image:
      -moz-radial-gradient(circle, #FFFFFF 2px, rgba(248,255,128,.5) 4px, transparent 40px),
      -moz-radial-gradient(circle, #FFFFFF 1px, rgba(255,186,170,.4) 3px, transparent 30px),
      -moz-radial-gradient(circle, rgba(255,255,255,.9) 1px, rgba(251,255,186,.3) 2px, transparent 40px),
      -moz-radial-gradient(circle, rgba(255,255,255,.4), rgba(253,255,219,.2) 1px, transparent 30px);
   /* Background images size */
   background-size: 550px 550px, 350px 350px, 250px 270px, 220px 200px;
   /* Background images position*/
   background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
}

Как же это работает? А идея проста, мы повторяем фоновое изображение background-image. Background-image повторяется по всему фону, если не указан атрибут no-repeat. В нашем случае мы используем четыре повторяющихся background-image с различными размерами и позициями, так что каждое background-image будет повторяться по разному. Можно добавить в код гораздо больше background-image, но это скажется на производительности компьютера пользователя, особенно если мы будем анимировать фон.

Создание CSS3 анимации фона

Пришло время и для анимации фона. Эта часть не будь такой сложной, если вы знаете, CSS3 атрибут animation. Определите ваши атрибуты CSS3 анимации и укажите их в кадрах анимации, которые будут анимировать положение фона для различных background-image (звездочек).

body {
   background-color: black;
   /* Firefox */
   background-image:
      -moz-radial-gradient(circle, #FFFFFF 2px, rgba(248,255,128,.5) 4px, transparent 40px),
      -moz-radial-gradient(circle, #FFFFFF 1px, rgba(255,186,170,.4) 3px, transparent 30px),
      -moz-radial-gradient(ellipse, rgba(255,255,255,.9) 1px, rgba(251,255,186,.3) 2px, transparent 40px),
      -moz-radial-gradient(ellipse, rgba(255,255,255,.4), rgba(253,255,219,.2) 1px, transparent 30px);
   /* Webkit */
   background-image:
      -webkit-gradient(radial, 50% 50%, 2, 50% 50%, 40, from(white), color-stop(0.1, rgba(248,255,128,.5)), to(transparent)),
      -webkit-gradient(radial, 50% 50%, 1, 50% 50%, 30, from(white), color-stop(0.1, rgba(255,186,170,.4)), to(transparent)),
      -webkit-gradient(radial, 50% 50%, 1, 50% 50%, 40, from(rgba(255,255,255,.9)), color-stop(0.05, rgba(251,255,186,.3)), to(transparent)),
      -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 30, from(rgba(255,255,255,.4)), color-stop(0.03, rgba(253,255,219,.2)), to(transparent));
   /* Background Attributes */
   background-size: 550px 550px, 350px 350px, 250px 270px, 220px 200px;
   background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
   /* Animation */
   animation-name: movement;
   animation-duration: 5s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   /* Firefox */
   -moz-animation-name: movement;
   -moz-animation-duration: 5s;
   -moz-animation-timing-function: linear;
   -moz-animation-iteration-count: infinite;
   /* Webkit */
   -webkit-animation-name: movement;
   -webkit-animation-duration: 5s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
}
@keyframes movement
{
   from {
         background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
   }
   to {
         background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
   }
}
@-moz-keyframes movement
{
   from {
         background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
   }
   to {
         background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
   }
}
@-webkit-keyframes movement
{
   from {
         background-position: 0 0, 30px 60px, 130px 270px, 70px 150px;
   }
   to {
         background-position: -550px 0, -320px 60px, -120px 270px, -150px 150px;
   }
}

А в демках также присутствует и анимация падающего снега в качестве фона.