最終成果物
これです。
ぽいですね。
これがbox-shadowプロパティで実現できます。
実装
土台になるhtmlの用意
さっくりと。
moon.html
<!DOCTYPE html>
<html lang ="ja">
<head>
<link rel="stylesheet" href="../css/moon.css">
</head>
<body>
<main class="stage">
<div class="moon"></div>
</main>
</body>
</html>
CSS
こちらもさっくりと。
解説はあとあと。
stageはただの背景なのでそんなに気にしなくていいです。
moon.css
/**
* stage
*/
.stage {
position: absolute;
width: 100%; height: 100%;
background-color: rgb(228, 217, 210);
display: flex;
justify-content: center;
align-items: center;
}
.stage:before,
.stage:after { position: absolute; content: ""; display: block; }
.stage:before {
top: 20px; left: 20px;
width: calc(100% - 40px); height: calc(100% - 40px);
border: solid 5px #6e5c60;
border-radius: 30px;
box-sizing: border-box;
opacity: 0.3;
}
/**
* moon
*/
.moon {
width: 500px;
height: 500px;
border-radius: 100%;
animation: anime 5s linear infinite;
}
@keyframes anime{
from{
box-shadow: none;
}
to{
box-shadow: 500px -200px 0 0 rgb(254, 228, 137) inset;
}
}
ちょっとだけ解説
実際のイメージとは逆かもですが、黄色の明るい部分がbox-shadowで表現されている部分です。
keyframesで定義されている通り、影がない状態から影がある状態にアニメーションさせています。
円形に別のオブジェクトを重ねようとするとどうしても線形な変化になってしまうので、自身に影をつけることで変化させます。
当然外側に影をつけても月にはならないので内側に変化させるためにinsetをbox-shadowにつけるのを忘れずに。
まとめ
box-shadowを内側につけるのは何かと使う場面がありそうですね。
意識していないと忘れてしまいそうなプロパティなのでたまに使ってあげましょう。