ページが非常に長い場合は、下にさらにコンテンツがあることをユーザーに知らせるために矢印が必要になることがあります。これは純粋な 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 ページ リスト タグ学習チュートリアル
<br />XHTML と CSS がオブジェクト指向だったらよかったのに。 。太陽は北...
Git は vscode に統合されており、git コマンドをいくつか記述しなくても、クリックするだ...
win docker-desktopを使ってコンテナ開発に接続し、ネットワーク上で色々試してみたいと...
数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...
注: この記事のすべての写真はインターネットから収集されたものであるため、DELL R720 サーバ...
SQL ファジークエリステートメント一般的なファジーステートメントの構文は次のとおりです。 SELE...
MySQL 8.0.13 にはデフォルトでデータ フォルダがあります。このフォルダを削除する必要があ...
CentOS 8 が正式にリリースされました! CentOS は Red Hat の再配布ポリシー...
<br />百度百科事典の正式版がついにオンラインになりました。2年間の「テスト版」の帽...
Cudaがインストールされているかどうかを確認してくださいアナコンダプロンプトに入力nvcc -V...
1. Docker Secretとは1. シナリオ表示MySQL サービスなど、一部のサービスではパ...
MySQL のデフォルトの動作モードは自動コミット モードです。つまり、明示的にトランザクションを開...
この記事では、パズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容は...
この記事では、例を使用して、MySQL で更新可能なビューを作成する方法について説明します。ご参考ま...
Unix/Linux システムの nobody ユーザーとは何ですか? 1. Windows システ...