HTML/CSS

最近流行りのwebデザイン!ダウンディレクションアローの実装方法!


今回は最近よく見る、ダウンディレクションアローの実装をメモしていきます。

 

ダウンディレクションアローとは?

下にスクロールするように指示する矢印のことです。

何度か見かけたことがあるのではないでしょうか。

http://plokijuhygft.html.xdomain.jp/

 

特徴としては、下にスクロールすることを促しているため、ぴょこぴょこ動くことです。

 

ぴょこぴょこ動かす方法

トータルのコード

 

animation: dda 2s infinite;

ここのコードの意味は、

『「dda」というアニメーションを2秒かけて行うことを永遠と続く。』

意味です。

 

 

@keyframes dda {}

ここでアニメーションを作成しています。

@keyframes アニメーション名 {}で作成します。アニメーション名はなんでもおけです。

『dda』とは、DownDirectionArrowを縮めたものです。

 

%によってその時点の動きを決めています。

今回は、transform: transrate(右へ,  下へ);によって位置を決めています。

 

 

なんとなくオシャレな感じなのでいいですよ!

簡単に実装できるので、ぜひぜひお試しください!!


コメントを残す

*