Font Awesomeを使ってみよう！2️⃣
記事IT・テクノロジー
今回はFont Awesomeのアニメーションを使ってみたいと思います！クラス名を追加するだけで出来ちゃいますので、一緒にやっていきましょう🎵
まずは前回の記事を参考に、Font Awesomeのall.min.cssを<head>タグ内に設定しておいてください。😊
↓
完成見本
今回は下記のようなリンクボタンを作ってみたいと思います。
▼静止画で伝わりづらいのですが、それぞれのアイコンが動いています。マウスが上に来ると、背景色がつきます。
Font Awesomeで用意されているアニメーション
▼Font Awesomeのサイトで見本（動いてる様子）が見られます。
https:// fontawesome.com/docs/web/style/animate
fa-beatなど、特定のクラス名を追加するだけで、アニメーションがつきます。
クラス名というのは、class=""のダブルクォーテーション内に書きます。半角スペースで区切って複数つけることも出来ます。
html
<ul class="sns-list">
<li class="youtube">
<a href="#"><i class="fa-brands fa-youtube fa-shake"></i>YouTube</a>
</li>
<li class="twitter">
<a href="#"><i class="fa-brands fa-twitter fa-bounce"></i>Twitter</a>
</li>
<li class="facebook">
<a href="#"><i class="fa-brands fa-facebook fa-flip" style="--fa-animation-duration: 3s"></i>Facebook</a>
</li>
</ul>
⭐️aタグのhrefのダブルクォーテーション内に、クリックしたら飛びたい先のURLを入れてください。（#と差し替える）
CSS
<style>
.sns-list {
max-width: 900px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
align-items: center;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
.sns-list li a {
text-decoration: none;
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: 2rem auto;
border-radius: 10px;
color: #1d3150;
padding: 1rem 2rem;
transition: 0.3s;
}
.sns-list li a:hover {
color: #fff;
}
.youtube a {
border: solid 3px #f00;
}
.twitter a {
border: solid 3px #00acee;
}
.facebook a {
border: solid 3px #3b5998;
}
.youtube a:hover {
background-color: #f00;
}
.twitter a:hover {
background-color: #00acee;
}
.facebook a:hover {
background-color: #3b5998;
}
.sns-list li i {
text-align: center;
}
</style>
▼今回はhtml内にCSSも書きましたので、全体としてはこのようになりました。
いかがでしたか？今回は以上になります。お疲れ様でした⭐️
