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

推薦する

JSを使用して簡単な計算機を実装する

JSを使用して、参考用の簡単な計算機を完成させます。具体的な内容は次のとおりです。要件: 入力値は数...

追加、削除、変更、クエリを実行するための JS 操作オブジェクト配列のサンプルコード

1. はじめに最近、私は友人が JSON 配列を追加、削除、変更するための簡単なページを作成するのを...

MySQL 文字列連結関数 GROUP_CONCAT の詳細な説明

前回の記事では、クロステーブル更新について書きました。自分が書いた SQL を見たとき、自分がバカみ...

データベースの水平セグメンテーションを実装するための2つのアイデア

導入インターネット アプリケーションの普及に伴い、膨大なデータの保存とアクセスがシステム設計における...

CentOS 7 環境でソースコードから MySQL 5.7 をインストールする方法

この記事では、CentOS 7 環境でソース コードから MySQL 5.7 をインストールする方法...

MYSQL の COLLATE とは何ですか?

序文MySQL で show create table <tablename> コマンド...

Dockerはredis 5.0.7をインストールし、外部構成とデータの問題をマウントします

Redis は、ANSI C で記述されたオープンソースの NoSQL データベースであり、ネットワ...

無効と読み取り専用で入力を読み取り専用に設定する

読み取り専用入力を実現するには、無効と読み取り専用の 2 つの方法があります。当然、どちらの結果も読...

CSS3 で less のテキストの長い影を実装する

この記事では主に、CSS3 LESS で長いテキストの影を実装する方法を紹介し、皆さんと共有します。...

CentOS7にNginxをインストールして自動起動を設定する方法

1.公式サイトからインストールパッケージをダウンロードするhttp://nginx.org/en/d...

Linux lseek関数の使い方の詳しい説明

注:記事に誤りがある場合は、メッセージを残して指摘してください。ご協力ありがとうございます。名前名前...

SVN のインストールと基本操作 (グラフィック チュートリアル)

目次1. SVNとは何か2. SVNサーバーとクライアントの取得方法3. SVN ワークフローとアー...

Firefox で Flash を再生するためのオブジェクトとパラメータの書き方

コードをコピーコードは次のとおりです。 <object classid="clsid...

要素シャトルフレームのパフォーマンス最適化の実装

目次背景解決新しい質問高度な背景シャトル ボックスが大量のデータを処理すると、レンダリングされる D...