今回は「HTMLとCSSで矢印アイコンを上下移動させる方法」について紹介します！
ユーザーにWEBサイトを下にスクロールできることを明示するアニメーションとして使えますので、是非参考にしてください。
【簡単】HTMLとCSSで矢印アイコンを上下移動させる方法
完成形はこちら。
それではHTMLとCSSのコードを解説していきます。
HTML
HTMLコードはこちら。
<div class="circle"> <i class="fas fa-chevron-down"></i> </div>
親要素circleを用意して、その中にFont Awesomeを使ってアイコンを表示させました。
アイコンは自由に変えてもらって大丈夫です。
CSS
CSSコードはこちら。
.circle i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
animation: updown 2s infinite ease-in-out;
}
// アニメーション
@keyframes updown {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, -30px);
}
100% {
transform: translate(0, 0);
}
}
// アニメーション
◎1行目〜8行目
「position: absolute;」で絶対配置にします。
「position: relative;」を指定していないので、全体を基準に「top: 50%;」と「left: 50%;」で中央にアイコンを寄せます。
これだけだと少し中央からズレているので、「transform: translate(-50%, -50%);」で綺麗に中央寄せに。
Font Awesomeを使っているので、フォントサイズで大きさを指定します。
そして「animation」を指定。
◎11行目〜21行目
keyframesを使って、アイコンを上下に移動させるCSSアニメーションを作っていきます。
まずはkeyframesのアニメーションに名前をつけます。
名前は自由でいいのですが、今回はアイコンが上下移動するということで「updown」といった名前にしました。
名前を見たらどんなアニメーションなのかすぐに分かるような名前にするのがおすすめですね。
まとめ
以上が、「HTMLとCSSで矢印アイコンを上下移動させる方法」でした。
是非WEBサイトを作る際に取り入れてみてください。
