CSS3.0 でネオンボタンアニメーション効果を実装するためのサンプルコード

今日は、CSS 3.0 で実装されたネオンボタンアニメーション効果を紹介します。効果は次のとおりです。

以下はコード実装です。コピーして貼り付け、収集していただいて結構です。

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ネオンボタンアニメーション効果を実現する CSS 3.0</title>
    <スタイル>
        * {
            フォント ファミリ: 'Microsoft YaHei'、サンセリフ;
            ボックスのサイズ: 境界線ボックス;
        }
 
        体 {
            ディスプレイ: フレックス;
            アイテムの位置を中央揃えにします。
            コンテンツの中央揃え: 中央;
            最小高さ: 100vh;
            背景: #050801;
        }
 
        {
            位置: 相対的;
            表示: インラインブロック;
            パディング: 25px 30px;
            マージン: 0 50px;
            色: #03e9f4;
            テキスト装飾: なし;
            オーバーフロー: 非表示;
            遷移: 0.5;
            文字間隔: 4px;
            -webkit-box-reflect: 1px以下 linear-gradient(transparent, #0005);
        }
 
        a:n番目の子(1) {
            フィルター: 色相回転(290度);
        }
 
        a:n番目の子(3) {
            フィルター: 色相回転(110度);
        }
 
        ホバー{
            背景: #03e9f4;
            色: #050801;
            ボックスシャドウ: 0 0 5px #03e9f4,
                0 0 25ピクセル #03e9f4,
                0 0 50ピクセル #03e9f4,
                0 0 200px #03e9f4;
        }
 
        スパンの
            位置: 絶対;
            表示: ブロック;
        }
 
        span:nth-child(1) {
            上: 0;
            左: -100%;
            幅: 100%;
            高さ: 2px;
            背景: 線形グラデーション(90度、透明、#03e9f4);
            アニメーション: animate1 1s 線形無限;
        }
 
        @keyframes アニメーション1 {
            0% {
                左: -100%;
            }
 
            50%、
            100% {
                左: 100%;
            }
        }
 
        span:nth-child(2) {
            上: 0;
            右: 0;
            高さ: 100%;
            幅: 2px;
            背景: 線形グラデーション(92度、透明、#03e9f4);
            アニメーション: animate2 1s 線形無限;
            アニメーション遅延: 0.25秒;
        }
 
        @keyframes アニメーション2 {
            0% {
                上: -100%;
            }
 
            50%、
            100% {
                上: 100%;
            }
        }
 
        span:nth-child(3) {
            下部: 0;
            右: -100%;
            高さ: 2px;
            幅: 100%;
            背景: 線形グラデーション(180度、透明、#03e9f4);
            アニメーション: animate3 1s 線形無限;
            アニメーション遅延: 0.5秒;
        }
 
        @keyframes アニメーション3 {
            0% {
                右: -100%;
            }
 
            50%、
            100% {
                右: 100%;
            }
        }
 
        span:nth-child(4) {
            下部: -100%;
            左: 0;
            幅: 2px;
            高さ: 100%;
            背景: 線形グラデーション(270度、透明、#03e9f4);
            アニメーション: animate4 1s 線形無限;
            アニメーション遅延: 0.75秒;
        }
 
        @keyframes アニメーション4 {
            0% {
                下部: -100%;
            }
 
            50%、
            100% {
                下部: 100%;
            }
        }
    </スタイル>
</head>
 
<本文>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        ネノボタン
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        ネノボタン
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        ネノボタン
    </a>
</本文>
 
</html>

これで、CSS3.0 でネオンボタンアニメーション効果を実装するサンプルコードに関するこの記事は終了です。CSS ネオンボタンに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML 形式の JSON 出力の例 (テストインターフェース)

>>: Vue カプセル化コンポーネントツール $attrs、$listeners の使用