これは、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 順序問題を解決する方法についての簡単な説明
JSを使用して、参考用の簡単な計算機を完成させます。具体的な内容は次のとおりです。要件: 入力値は数...
1. はじめに最近、私は友人が JSON 配列を追加、削除、変更するための簡単なページを作成するのを...
前回の記事では、クロステーブル更新について書きました。自分が書いた SQL を見たとき、自分がバカみ...
導入インターネット アプリケーションの普及に伴い、膨大なデータの保存とアクセスがシステム設計における...
この記事では、CentOS 7 環境でソース コードから MySQL 5.7 をインストールする方法...
序文MySQL で show create table <tablename> コマンド...
Redis は、ANSI C で記述されたオープンソースの NoSQL データベースであり、ネットワ...
読み取り専用入力を実現するには、無効と読み取り専用の 2 つの方法があります。当然、どちらの結果も読...
この記事では主に、CSS3 LESS で長いテキストの影を実装する方法を紹介し、皆さんと共有します。...
1.公式サイトからインストールパッケージをダウンロードするhttp://nginx.org/en/d...
注:記事に誤りがある場合は、メッセージを残して指摘してください。ご協力ありがとうございます。名前名前...
目次1. SVNとは何か2. SVNサーバーとクライアントの取得方法3. SVN ワークフローとアー...
WebRTC は、Web Real-Time Communication の略で、Web リアルタイ...
コードをコピーコードは次のとおりです。 <object classid="clsid...
目次背景解決新しい質問高度な背景シャトル ボックスが大量のデータを処理すると、レンダリングされる D...