CSS animation day19 となりました。
本日は、CSS animation でスターウォーズを作ります。
#1. 完成版
See the Pen StarWars by hiroya iizuka (@hiroyaiizuka) on CodePen.
#2. 参考文献
sitepoint
#3. 分解してみる
❶.
背景に以前作成した、Starを使います。
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>
<div class="titles">
<div id="titlecontent">
<p>Long time ago...
</p>
</div>
</div>
</body>
</html>
styles.css
body {
height: 100%;
overflow: hidden;
background: #090a0f;
}
#content {
position: absolute;
color: #ffff70;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
}
#stars {
width: 1px;
height: 1px;
background: transparent;
transform: perspective(100px) rotateX(10deg);
animation: star 50s linear infinite;
box-shadow: 779px 1331px #fff, 324px 42px #fff, 303px 586px #fff,
1312px 276px #fff, 451px 625px #fff, 521px 1931px #fff, 1087px 1871px #fff,
36px 1546px #fff, 132px 934px #fff, 1698px 901px #fff, 1418px 664px #fff,
1448px 1157px #fff,
...
@keyframes star {
from {
transform: translateY(0px);
}
to {
transform: translateY(-2000px);
}
}
いい感じです。
❷.
では、テキストを傾けて奥に向かわせるにはどうしたら良いでしょうか？
結論から言うと、rotateX するとできそうです。
スターでやってみましょう。
styles.css
body {
height: 100%;
overflow: hidden;
background: #090a0f;
transform: perspective(300px) rotateX(60deg) ;
}
#star{
...
}
画面全体をrotateX することで、奥に向かうようになりました。
では、これを、text に応用しましょう。
styles.css
#content {
position: absolute;
color: #ffff70;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) perspective(300px) rotateX(30deg);
font-size: 40px;
}
大分いい感じになってきましたね。
❸.
では、最後に、このtext にアニメーションをつけましょう。
styles.css
#content {
position: absolute;
color: #ffff70;
top: 50%;
left: 10%;
transform: translate(-50%, -50%);
font-size: 40px;
animation: text linear 15s infinite;
}
@keyframes text {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-1000px);
}
}
rotateX はこういう奥ゆきを出したい時に使うんですね。
非常に勉強になります。
それでは、また明日〜