CSS と Bootstrap アイコンを使用して、上下にジャンプするインジケーター矢印のアニメーション効果を作成します。

ページが非常に長い場合は、下にさらにコンテンツがあることをユーザーに知らせるために矢印が必要になることがあります。これは純粋な CSS を使用して実現できます。

HTML: クリックすると指定された位置にスライドするようにアンカーポイントを変更するリンクを追加します。ここでは、Bootstrap 3.x バージョンの下矢印がアイコンとして使用されています。

<a href="#" class="スクロールダウン">
  <span> <i class="glyphicon glyphicon-chevron-down"></i> </span>
</a>

CSS: アニメーション効果の追加

/*スライドダウンアニメーション効果*/
@-webkit-keyframes ドロップ {
  0% { 上:0px; 不透明度: 0;}
  30% { 上:10px; 不透明度: 1;}
  100% { 上:25px; 不透明度: 0;}
}
@keyframes ドロップ {
  0% { 上:0px; 不透明度: 0;}
  30% { 上:10px; 不透明度: 1;}
  100% { 上:25px; 不透明度: 0;}
}
/*アニメーションを適用し、ボタン効果を追加します*/
.スクロールダウン{
    境界線: 2px 実線 #bbb;
    境界線の半径: 50%;
    マージン: 0 自動;
    高さ: 50px;
    幅: 50px;
    表示: ブロック;
    テキスト配置: 中央;
    zインデックス: 10;
    -webkit-transition: すべて 0.125 秒、ease-in-out 0 秒;
    -moz-transition: すべて 0.125 秒、ease-in-out 0 秒;
    -ms-transition: すべて 0.125 秒、ease-in-out 0 秒;
    -o-transition: すべて 0.125 秒、ease-in-out 0 秒;
    遷移: すべて 0.125 秒、ease-in-out 0 秒;
}
.スクロールダウンスパン{
    位置: 相対的;
    色: #bbb;
    フォントサイズ: 24px;
    -webkit-アニメーション名: ドロップ;
    -webkit アニメーション期間: 1 秒;
    -webkit-アニメーションタイミング関数: linear;
    -webkit-アニメーション遅延: 0秒;
    -webkit-アニメーションの反復回数: 無限;
    -webkit-アニメーション再生状態: 実行中;
    アニメーション名: ドロップ;
    アニメーション期間: 1秒;
    アニメーションタイミング関数: linear;
    アニメーション遅延: 0秒;
    アニメーションの反復回数: 無限;
    アニメーション再生状態: 実行中;
}

要約する

上記は、CSS と Bootstrap アイコンを使用して上下にジャンプするインジケーター矢印アニメーション効果を作成する方法について紹介したものです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: HTML Web ページリストタグ学習チュートリアル

>>: jQueryはフォーム検証機能を実装します