CSS 3.0 テキストホバージャンプ特殊効果コード

CSS 3.0 テキストホバージャンプ特殊効果コード

これは、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 順序問題を解決する方法についての簡単な説明

推薦する

入力選択スタイルを変更する CSS 疑似クラスのサンプルコード

注: この表はW3Schoolチュートリアルから引用したものです疑似要素の分類と機能: 入力選択スタ...

SqlクエリMySqlデータベーステーブル名と説明テーブルフィールド(列)情報

以下では、SQL クエリ ステートメントを使用して、Mysql データベース内のテーブルのテーブル名...

角度でechartsマップを使用する詳細な説明

目次echartの初期化アプリベースチャートコンポーネントhtml CS app-base-char...

rem をモバイル デバイスに適応させる方法の例

序文モバイル端末のREM適応ソリューションのレビューと概要remの使い方rem 単位の計算は、HTM...

MySQL データベースの詳細な説明 - 複数テーブル クエリ - 内部結合、外部結合、サブクエリ、相関サブクエリ

複数テーブルクエリ複数のテーブルから関連するクエリ結果を取得するには、単一の SELECT ステート...

HTMLがHikvisionカメラのリアルタイム監視機能を実現

最近、同社は CCFA 関連のいくつかの作業を行う予定で、その 1 つはカメラのリアルタイム監視を再...

MySQL データ型の最適化の原則

MySQL は多くのデータ型をサポートしており、高パフォーマンスを得るには適切なデータ型を選択するこ...

CentOS/RHEL システムで VLAN タグ付きイーサネット カードを使用する方法

シナリオによっては、Linux サーバー (CentOS/RHEL) の同じイーサネット カード (...

Centos8 システムの VMware インストール チュートリアル図 (コマンド ライン モード)

目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...

Ubuntu 18.04 コマンドでタッチパッドを無効/有効にする

Ubuntu では、ショートカット キーでタッチパッドをオフにできない状況によく遭遇します。この問題...

Node.js における非同期プログラミングの知識ポイントの詳細な説明

導入JavaScript はデフォルトでシングルスレッドであるため、コードは並列実行するための新しい...

ページ内の検索エンジンの呼び出しはBaiduを例に挙げています

今日、突然、自分のウェブページで Google や Baidu のような強力な検索エンジンを呼び出す...

Vue のすべてのカプセル化方法の簡単な概要

目次1. カプセル化API 2. グローバルツールコンポーネントを登録する3. グローバル関数をカプ...

MySQL 5.7.19 のインストールと設定方法のグラフィック チュートリアル (win10)

以下に記録されているように、WIN10システムにMYSQLをダウンロードしてインストールするための詳...

Vue における v-for のキーの一意性の詳細な説明

目次1. DOM の違い2. 同じレイヤーの同じタイプの要素にキー属性を追加する3. キーはインデッ...