CSSで実装する次のコンテンツへと促すスクロールダウンのラインアニメーション | NxWorld

ファーストビューで大きめのイメージやムービーなどを配置しているサイトでよく見る、次セクションへスクロールするよう促すラインアニメーションをCSSで表現したサンプルです。 以前にもスクロールを促す要素として矢印・サークル・マウスなどをCSSで表現する実装コードを紹介しましたが、最近はこのタイプの実装要望が多いので自分用に一覧化したものをシェアします。 これといってユニークな動きでもなく基本的には同じような動きになりますが、汎用的に使えそうなもの7タイプです。 見栄えも動きもすべてCSSで表現しているため、カラー・サイズ・スピードなど自分好みにいろいろと変更するのも容易だと思います。 共通のHTML・CSS 以下で紹介している内容は、すべて下記のようなHTMLを使用しています。 CSSはa要素とその擬似要素への共通スタイルとして下記を記述しています。 a要素にいろいろとスタイル指定はしてありま