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

推薦する

HTMLページでよく使われるいくつかの小さなメソッド

<Head>タグに追加する<meta http-equiv="pragm...

JavaScript で実装された 6 つの Web ページ画像カルーセル効果の詳細な説明

目次1. マウスがカルーセル モジュール上を通過すると、左右のボタンが表示され、モジュールを離れると...

DockerはMariaDBのサブライブラリとサブテーブル、および読み書き分離機能を実装します

目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...

Vueオプションの詳細な説明

目次1. オプションとは何ですか? 2. 含まれる属性3. エントリー属性エルデータ方法コンポーネン...

Linux CentOS インストール JDK および Tomcat チュートリアル

まずJDKをダウンロードします。ここではjdk-8u181-linux-x64.tar.gzを使用し...

HTML ウェブページの段落レイアウトと改行

Web ページの外観はレイアウトに大きく左右されます。ページ内に長い段落のテキストがある場合、通常は...

デザイン理論:人の心を理解する方法

<br />かつて、仏印と東坡氏が仏教について雑談していたとき、東坡氏が突然こう言った。...

Vue プロジェクトはファイルダウンロードの進行状況バー機能を実装します

日常業務でファイルをダウンロードする一般的な方法は 2 つあります。 1 つ目は、サーバーのファイル...

HTML 要素 noscript の使用の紹介

noscript の定義と使用法noscript 要素は、スクリプトが実行されない場合の代替コンテン...

el-table ヘッダーでテキストを折り返す 3 つの方法の詳細な説明

目次問題の説明レンダリング3種類のコード要約する問題の説明通常、表のヘッダーは折り返されませんが、ビ...

基本構造、ドキュメント タイプ、ヘッダー、本文などの一般的な HTML 要素の概要。

1. 基本構造:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBL...

2秒以内にHTMLページ内の他のページにリダイレクトする方法

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

CSS トップに戻る コード例

最近のウェブサイトのほとんどはページが長く、4 画面または 5 画面の長さのものもあれば、2 画面ま...

Nodejs-cluster モジュールの知識ポイントの概要と使用例

面接官から「NodeJS で複数のプロセスを開始する方法を教えてください」と尋ねられることがあります...

Centos7 での mysql 8.0.15 のインストールと設定

この記事では、参考までにMySQL 8.0.15のインストールと設定のグラフィックチュートリアルを紹...