ページが非常に長い場合は、下にさらにコンテンツがあることをユーザーに知らせるために矢印が必要になることがあります。これは純粋な 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 ページ リスト タグ学習チュートリアル
<Head>タグに追加する<meta http-equiv="pragm...
目次1. マウスがカルーセル モジュール上を通過すると、左右のボタンが表示され、モジュールを離れると...
目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...
目次1. オプションとは何ですか? 2. 含まれる属性3. エントリー属性エルデータ方法コンポーネン...
まずJDKをダウンロードします。ここではjdk-8u181-linux-x64.tar.gzを使用し...
Web ページの外観はレイアウトに大きく左右されます。ページ内に長い段落のテキストがある場合、通常は...
<br />かつて、仏印と東坡氏が仏教について雑談していたとき、東坡氏が突然こう言った。...
日常業務でファイルをダウンロードする一般的な方法は 2 つあります。 1 つ目は、サーバーのファイル...
noscript の定義と使用法noscript 要素は、スクリプトが実行されない場合の代替コンテン...
目次問題の説明レンダリング3種類のコード要約する問題の説明通常、表のヘッダーは折り返されませんが、ビ...
1. 基本構造:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBL...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
最近のウェブサイトのほとんどはページが長く、4 画面または 5 画面の長さのものもあれば、2 画面ま...
面接官から「NodeJS で複数のプロセスを開始する方法を教えてください」と尋ねられることがあります...
この記事では、参考までにMySQL 8.0.15のインストールと設定のグラフィックチュートリアルを紹...