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

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はフォーム検証機能を実装します

推薦する

XHTML と CSS によるオブジェクト指向プログラミング

<br />XHTML と CSS がオブジェクト指向だったらよかったのに。 。太陽は北...

VSCode 構成 Git メソッドの手順

Git は vscode に統合されており、git コマンドをいくつか記述しなくても、クリックするだ...

Docker の win ping 失敗コンテナ回避ガイド

win docker-desktopを使ってコンテナ開発に接続し、ネットワーク上で色々試してみたいと...

CSSは2つの要素をブレンドする効果(スティッキー効果)を実現します。

数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...

Dell R720 サーバーに Windows Server 2008 R2 をインストールする方法

注: この記事のすべての写真はインターネットから収集されたものであるため、DELL R720 サーバ...

MySQL ファジークエリステートメントコレクション

SQL ファジークエリステートメント一般的なファジーステートメントの構文は次のとおりです。 SELE...

MySQL 8.0.13 zipパッケージのインストール方法について

MySQL 8.0.13 にはデフォルトでデータ フォルダがあります。このフォルダを削除する必要があ...

CentOS 8 インストール図 (超詳細なチュートリアル)

CentOS 8 が正式にリリースされました! CentOS は Red Hat の再配布ポリシー...

Baidu百科事典UIの開発動向について議論する

<br />百度百科事典の正式版がついにオンラインになりました。2年間の「テスト版」の帽...

Win10 は Tsinghua ソースを使用して pytorch-GPU バージョンをすばやくインストールします (推奨)

Cudaがインストールされているかどうかを確認してくださいアナコンダプロンプトに入力nvcc -V...

Docker Secretの管理と使用の詳細な説明

1. Docker Secretとは1. シナリオ表示MySQL サービスなど、一部のサービスではパ...

MySQL トランザクション自動コミット自動コミット操作

MySQL のデフォルトの動作モードは自動コミット モードです。つまり、明示的にトランザクションを開...

js でパズルゲームを実装する

この記事では、パズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容は...

MySQLで更新可能なビューを作成する方法の詳細な説明

この記事では、例を使用して、MySQL で更新可能なビューを作成する方法について説明します。ご参考ま...

Unix/Linux システムにおける nobody ユーザーと nologin の詳細な紹介

Unix/Linux システムの nobody ユーザーとは何ですか? 1. Windows システ...