太陽がてかてか回ってるアニメが作りたいな～
そのくらいなら作れるかも
CSSのアニメーションを使って動かしてみましょう・・・
というわけで作ってみましたので簡単な解説をしていきます。
See the Pen sun by inu (@tenp) on CodePen.
太陽を描く
太陽は簡単にCSSで描画します。
真ん中の丸
最初に太陽本体の真ん中の円を描画します。
まず要素全てには
box-sizing: border-box;
をかけておきましょう。線幅分を計算しなくてよくなるし、今は大体いろんなとこにborder-boxがかかってしまっているのでデザイン崩れも防げます。
そして適当な<section>タグの中に空の<div>タグを作ります。
高さと幅を指定し、正方形を作ったら
border-radius: 50%;
で円にし、borderで枠線を作ります。
HTML
<section>
<div class="sun">
</div>
</section>CSS
section {
box-sizing: border-box;
width: 200px;
height:200px;
position: relative;
color: #fff;
background: currentcolor;
}
.sun {
position: absolute;
top: 25%;
left: 25%;
width: 100px;
height:100px;
border: 10px solid #000;
border-radius: 50%;
}太陽の光線部分を作る
光線部分のためにまた空のdivタグを作ります。これは高さと幅を決め、光線の一つの縦長の棒を作るためです。
これも角丸効果などをつけてちょっと装飾しています。
親要素のsectionタグを
position: relative;
にして、子要素である太陽の本体や光線は位置を
position: absolute;
で指定していきます。今光線の要素は太陽本体の子要素になっているので、太陽本体左上が基準位置（0,0）になっています。さらに枠線部分を抜かしているので、計算に注意します。
円の真ん中に来るようにするためにはこの場合、幅100px、線幅が10px×2あるので、100-20＝80px、その真ん中は40pxですが、光線自体の幅が14pxありますので、半分の7pxを引いて40-7＝33、left:33pxの位置を指定します。
その下の対称的な位置にもbox-shadowで同じものを作成します。始めに生成したものからどれほど下にいくか計算し、指定します。上の図ではわかりやすいように影で作ったものを赤く塗っています。
HTML
<section>
<div class="sun">
<div class="rays"></div>
</div>CSS
.rays {
position: absolute;
top: -56px;
left: 33px;
width: 14px;
height: 40px;
display: block;
background: #000;
border-radius: 30%;
box-shadow: 0 152px red;
}太陽の光線部分を角度を変えて複製する
次はさっき作った光線部分を複製するため、光線の要素をクラス名を変えて何個か複製します。一応今回は４個でやってみてます。
さきほどの光線と同じものを一個作ったら、今度はそれを太陽の中心を基準にして好きな角度分回転させます。
基準は何もしないままだと黒い光線の長方形の中心になっています。
transform-origin: 〇px 〇px;
で回転の基準を中心に変えます。基準を変更するときは、光線長方形の中心ではなく、光線長方形の左上からどのくらい移動させるかを指定しますので、右に光線の幅の半分、下に光線、隙間、太陽本体の高さの半分を足した合計を指定します。
回転軸を中心にできたら、後は
transform: rotate(〇deg);
で好きな角度回します。
注意しなければいけないのは transform-originが初期値は要素の中心になっているが、数値を指定するときは左上からの移動距離を指定しなければならないということです。
HTML
<section>
<div class="sun">
<div class="rays"></div>
<div class="rays2"></div>
<div class="rays3"></div>
<div class="rays4"></div>
</div>
</section>CSS
.rays, .rays2, .rays3, .rays4 {
position: absolute;
top: -56px;
left: 33px;
width: 14px;
height: 40px;
display: block;
background: #000;
border-radius: 30%;
box-shadow: 0 152px red;
}
.rays2 {
transform: rotate(45deg);
transform-origin: 7px 96px;
}
.rays3 {
transform: rotate(90deg);
transform-origin: 7px 96px;
}
.rays4 {
transform: rotate(135deg);
transform-origin: 7px 96px;
}太陽を回転させるアニメーションを付ける
太陽を描き終わったら次は光線部分を回転させるアニメーションをつけます。
.sun {
position: absolute;
top: 25%;
left: 25%;
width: 100px;
height:100px;
border: 10px solid #000;
border-radius: 50%;
animation: rotation 10s infinite linear;
}
@keyframes rotation {
100% { transform: rotate(360deg); }
}@keyframes でアニメの動きをつけます。
100% { transform: rotate(360deg); }
親要素の太陽で呼び出せば、基準は太陽の中心になっていますので、360度回転させることができます。
animationでアニメにかかる時間や動きなどを指定して完成です。
コメント