Сонячне затемнення на CSS

20-го березня 2015 відбулося повне сонячне затемнення. Попереднього разу воно ставалось у 1997 році, а наступного разу відбудеться аж у 2033-у. Тому спеціально для тих, хто пропустив це видовище я підготував сонячне затемнення на чистому CSS.

Поїхали)

Розмітка

Її немає. Ми не використаємо жодного тегу і обійдемося лише псевдоелементами, тому для вам досить створити звичайний документ з базовою розміткою:

  <meta charset="UTF-8">
  <title>Solar Eclipse</title>


  

CSS

Найцікавіше починається тут.

Псевдоелемент :after буде у нас місяцем, відповідно :before - сонцем.

Все дуже просто: анімація sky відповідає за зміну кольору "неба", тобто сторінки, glow змінює колір сонця та робить сонячну корону, eclipse рухає місяць небом,змінює його фоновий колір та розміри.

Весь код виглядає так:

* {transition: all .5s;}

/* Анімація неба */
@keyframes sky {
    0% {background:#c4daee;}
    25% {background:#c4daee;}
    45%, 55% {background:#0c0224;}
    100% {background:#c4daee;}
}

/* Анімація сонячної корони */
@keyframes glow {
    0% {box-shadow:1px 1px 1px #fff;background:#fff;}
    45%, 55% {box-shadow:1px 1px 150px #e1e777;background:#e1e777;}
    100% {box-shadow:1px 1px 1px #fff;background:#fff;}
}

/* Анімація затемнення, яка описує рух місяця і зміну його кольору */
@keyframes eclipse {
    0% {
      right:-40%;
      background:#fff;
      transform:scale(2) translateY(-50%);
    }
    45%, 55% {
      right: calc(50% - 90px);
      transform:scale(1) translateY(-50%);
      background:#0c0224;
    }
    100% {
      right:120%;
      background:#fff;
      transform:scale(2) translateY(-50%);
    }
}

/*
Робимо html на все вікно браузера
і центруємо сонце на сторінці
*/
html {
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  animation: sky 12s infinite linear;
}

/*
Робимо сонце і місяць круглими.
 */
html:before, html:after {
  content:"";
  border-radius:50%;
}

/* Встановлюємо нескінченну анімацію для сонця */
html:before {
  z-index:10;
  width:200px; 
  height:200px;
  animation: glow 12s infinite ease-in-out;
}

/* Встановлюємо нескінченну анімацію для місяця і робимо його меншого розміру, для чіткої корони */
html:after {
  position:absolute;
  z-index:11;
  top:50%;
  width:180px; 
  height:180px;
  transform:translateY(-50%);
  animation: eclipse 12s infinite ease-in-out;
}

Ну і звісно кінцевий результат: