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