CSS animation day6 となりました。
本日は、夜空に浮かぶ星を表現したいと思います。
#1. 完成版
See the Pen yZeQYx by hiroya iizuka (@hiroyaiizuka) on CodePen.
#2. なぜか？
background image に使うと良いですね、心が落ち着きます。
#3. 参考文献
https://www.youtube.com/watch?v=aywzn9cf-_U
https://pastebin.com/gEfdRwgc
#4. 分解してみる
❶.
ではやっていきましょう。
まずは背景を作ります。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="stars"></div>
<div id="stars2"></div>
<div id="stars3"></div>
</body>
</html>
styles.css
body{
height: 100%;
overflow: hidden;
background: #090a0f
}
❷.
星を作ります。
こちらから、星のbox-shadowをコピペします。長いです
styles.css
#stars {
width: 1px;
height: 1px;
background: transparent;
animation: star 50s linear infinite;
box-shadow: //ここに、コピペしたやつを貼り付ける
}
こうなります。
❸.
stars:afterにも同じことをする
styles.css
#stars:after{
content: '';
position: absolute;
top: 2000px;
width: 1px;
height: 1px;
background: transparent;
box-shadow: //ここにコピペする。
}
❹.
stars2、stars2:after、stars3、stars3:after にも同じことをする。
styles.css
#stars2{
width: 2px;
height: 2px;
background: transparent;
animation: star 100s linear infinite;
box-shadow: //ここにコピペする。
}
#stars2:after{
content: '';
position: absolute;
top: 2000px;
width: 2px;
height: 2px;
background: transparent;
box-shadow: //ここにコピペする。
#stars3 {
width: 3px;
height: 3px;
background: transparent;
animation: star 150s linear infinite;
box-shadow: //ここにコピペする。
}
#stars3:after{
content: '';
top: 2000px;
width: 3px;
height: 3px;
background: transparent;
box-shadow: //ここにコピペする。
}
大小様々な綺麗な星空ができました。
❺.
最後です、アニメーションで動かしましょう。
雨と同じ、translateY を使います。
styles.css
@keyframes star{
from{
transform: translateY(0px);
}
to{
transform: translateY(-2000px);
}
}
完成！
星の素材をほとんどコピペし、keyframe で上下に動かしただけでしたが、
こんな綺麗な表現ができます。
それではまた明日！