落ちゲーアプリ作成９
本日は、プログラミングスクールの成果発表会（卒業発表会）でした。
そのため、とりあえず見た目を綺麗にするために css をいじりました。
ボタン要素になる link_to に対して、 css で、
.game_start {
position: absolute;
top: 63%;
left: 50%;
transform: translateX(-50%);
height: 75px;
border: solid 2px rgb(88, 59, 147);
background-color: dimgray;
opacity:90%;
}
.game_start:hover {
background-color: rgba(240, 248, 255, 0.715);
}
.link_game_start {
text-align: center;
line-height: 67px;
padding: 0 10px 0 5px;
font-size: 50px;
font-family: 'Yuji Syuku', serif;
text-decoration: none;
}
.link_game_start:hover {
color: rgb(160, 49, 157);
}
こんな感じで、要素の上にマウスが来たら色が変わるようにしました。
game_start は div 要素で親要素で、 link_game_start は link_to で子要素です。
left: 50%; と
transform: translateX(-50%); で、要素の真ん中を画面の中央にしています。
あとは、下記の記事を参考にして総得点の表示を光らせました。
【CSS】光るボタンアニメーションの作り方！カスタマイズまで手順を詳しく解説
@keyframes shine-run(アニメーション名) {
0% { 最初の状態 }
100% { 最後の状態 }
}
で 0% から 100% へ自動的にアニメーションを起こしてくれることがわかりました。（その前にアニメーション名や何秒の感覚で発生するか、繰り返すかの記載が必要ですが。）
下記が参照記事です。
HTMLとCSSだけでフェードイン、フェードアウトのアニメーションを実装する方法を現役デザイナーが解説【初心者向け】 | TechAcademyマガジン
今日までで、一旦の区切りとして出来たアプリがこちら
簡単なゲームなので是非やってみてください。
