朝の空の2

04:43 の東の空。日の出。

日の出の時間は爽やかで良いが、問題はこんな時間に目が覚めてること。夜は遅いのに、朝は大体いつもこんな時間で、もうずっと睡眠不足。今日は土曜なのが救いだけど。

日が上り切るまでぼんやり眺めていたのだが、まあ、眩しいよな。地平線ギリギリだとまだ耐えられるけど、ちょっと上るともう直視は無理。視線を逸らすと緑色の残像が…。

部屋に戻って、日蝕観測用のフィルターがあったことを思い出したのだが、それをどこに置いたかを思い出せない。だからって訳ではないが、皆既日蝕をcssで再現してみた。

フィルター越に見た日蝕はこんな感じだったはず。

現実の皆既日蝕は始まりから終わりまで大体7分ぐらいかかるのだが、そんなに待ってられないので数秒で。月役の黒い円は同じ速さで左から右に動いているのだが、皆既の瞬間はダイナミックさが増す感じがするね。

ついでにソースも。

まずはhtml


<div id="space">
  <div id="sun"></div>
</div>

そしてcss


:root {
  --size: 100px;
}

#space {
  width: calc( var( --size ) * 3 );
  height: calc( var( --size ) * 3 );
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

#sun {
  width: var( --size );
  height: var( --size );
  border-radius: 50%;
  background-color: red;
}
#sun::after {
  content: ' ';
  display: block;
  width: var( --size );
  height: var( --size );
  border-radius: 50%;
  background-color: black;
  position: relative;
  left: calc( -1 * var( --size ));;
  top: 0;
  animation-name: moon;
  animation-duration: 30s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes moon {
  0% ,
  10% {
    left: calc( -1 * var( --size ));;
  }
  100% {
    left: calc( var( --size ));;
  }
}

こういうちょっとしたものを作るたびに思うけど、便利な世の中になったよな。