CSSでハートの鼓動アニメーションをボタン化して実装する!

本日は「ドキドキ!!」「バクバク!!」という心臓の鼓動アニメーションを作成してみます。ボタンにしてリンクをつけてみますよ。

心臓の鼓動アニメーション完成デモ

プログラミング

CSSでハートの鼓動アニメーション

まず、鼓動にするアニメーションだけ作ります。調査したときcssでハートの形を描いているサンプルや画像を使ったものが多かったですけど、「あいおんな」ではわかりやすく使いやすいスクエア(四角)にします。あくまでドキドキアニメしたいだけ( *´艸｀)

htmlです。

cssです。これだとシンプルに見えますよね。

[css]
.beat-button{
margin: 50px;
width: 100px;
height: 30px;
background: #fc2e5a;
}

.beat-anima {
animation: pounding .5s linear infinite alternate;
}

@keyframes pounding {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
[/css]

時間でスケールをかけて繰り返しているだけですね。

リンクを付け加えます

リンクにclassを突っ込んで下線を消します。そして、テキストを上下左右を中央あわせにします。

htmlです。

cssです。

[css]
a.act-button{
margin: 50px;
width: 150px;
height: 30px;
background: #f97783;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #fff;
text-decoration: none;
}
a:visited.act-button{
color: #fff;
text-decoration: none;
}
a:hover.act-button{
background: #fc2e5a;
color: #fff;
text-decoration: none;
}
a:active.act-button{
background: #fc2e5a;
color: #fff;
text-decoration: none;
}
.beat-anima {
animation: pounding .30s linear infinite alternate;
}
@keyframes pounding {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
[/css]

display: flex;を利用した場合、左右の中央寄せはtext-align: center;は効かないため justify-content: center;を利用します。

以上で出来上がりです。一行一行コードを理解した方がいいですよ。