これは、CSS 3.0 で実装されたテキストのホバーとジャンプ効果です。効果は次のとおりです。 以下はコード実装です。コピーして貼り付け、収集していただいて結構です。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>CSS 3.0 テキストのホバーとバウンス効果</title> <スタイル> * { マージン: 0; パディング: 0; } 体 { ディスプレイ: フレックス; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 最小高さ: 100vh; 背景: #000; } .ローダー{ 位置: 相対的; } .loader スパン { 位置: 相対的; フォントサイズ: 2em; 色: #fff; 表示: インラインブロック; テキスト変換:大文字; アニメーション: 2 秒のイーズインアウト無限アニメーション; アニメーション遅延: calc(0.1s * var(--i)); アニメーション再生状態: 一時停止; } .loader:hover スパン { アニメーション再生状態: 実行中; } @keyframes アニメーション { 0%、 40%、 100% { 変換: translateY(0); } 20% { 変換: translateY(-50px); } } </スタイル> </head> <本文> <div class="loader"> <span style="--i:1;">あ</span> <span style="--i:2;">ん</span> <span style="--i:3;">私</span> <span style="--i:4;">メートル</span> <span style="--i:5;">あ</span> <span style="--i:6;">t</span> <span style="--i:7;">私</span> <span style="--i:8;">お</span> <span style="--i:9;">ん</span> <span style="--i:10;">_</span> <span style="--i:11;">P</span> <span style="--i:12;">l</span> <span style="--i:13;">あ</span> <span style="--i:14;">はい</span> <span style="--i:15;">_</span> <span style="--i:16;">さ</span> <span style="--i:17;">t</span> <span style="--i:18;">あ</span> <span style="--i:19;">t</span> <span style="--i:20;">え</span> <span style="--i:21;">.</span> </div> </本文> </html> 要約する CSS 3.0 テキストホバージャンプ特殊効果コードに関するこの記事はこれで終わりです。CSS 3.0 テキストホバージャンプに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: Element-uiはテーブル内のセルを直接クリックして編集します
>>: Docker-compose におけるdepends_on 順序問題を解決する方法についての簡単な説明
注: この表はW3Schoolチュートリアルから引用したものです疑似要素の分類と機能: 入力選択スタ...
以下では、SQL クエリ ステートメントを使用して、Mysql データベース内のテーブルのテーブル名...
目次echartの初期化アプリベースチャートコンポーネントhtml CS app-base-char...
序文モバイル端末のREM適応ソリューションのレビューと概要remの使い方rem 単位の計算は、HTM...
複数テーブルクエリ複数のテーブルから関連するクエリ結果を取得するには、単一の SELECT ステート...
最近、同社は CCFA 関連のいくつかの作業を行う予定で、その 1 つはカメラのリアルタイム監視を再...
MySQL は多くのデータ型をサポートしており、高パフォーマンスを得るには適切なデータ型を選択するこ...
シナリオによっては、Linux サーバー (CentOS/RHEL) の同じイーサネット カード (...
目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...
Ubuntu では、ショートカット キーでタッチパッドをオフにできない状況によく遭遇します。この問題...
導入JavaScript はデフォルトでシングルスレッドであるため、コードは並列実行するための新しい...
今日、突然、自分のウェブページで Google や Baidu のような強力な検索エンジンを呼び出す...
目次1. カプセル化API 2. グローバルツールコンポーネントを登録する3. グローバル関数をカプ...
以下に記録されているように、WIN10システムにMYSQLをダウンロードしてインストールするための詳...
目次1. DOM の違い2. 同じレイヤーの同じタイプの要素にキー属性を追加する3. キーはインデッ...