Javascript

おみくじを作ろう3

箱をクリックしていくと一つだけ当たりが出るおみくじのようなゲームを作ってみます。

  • 仕上げ

 

仕上げ

・前回まででランダムで一つだけ大吉と表示されるようにしそれ以外は小吉と表示されるようになるおみくじを作ってきました。

おみくじを作ろう2

・今回はそのおみくじにCSSでスタイリングを書き加えていきます。

・まずclass属性で.greatと.goodの2つが必要になってくるのでその2つを作っていきます。

・.greatは今まで作ってきた.circleをそのまま使っていけば回転しながら丸くなってくれるのでそのまま使い背景を少し豪華にするためにgoldにして、文字を太くするくらいの変更を加えて行きます。

.goodの方はクリックしたら少し小さくなるアニメーションと背景を赤くするアニメーションだけ追加知っていきます。小さくしたい場合はtransform: scale(.9);90%の大きさにすることができます。

-Javascript