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

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 の使用

推薦する

ESXI の仮想マシンにワークステーションをインストールするときに発生するネットワーク障害の解決策

問題の説明ESXI で Windows にワークステーションをインストールした後、内部の仮想マシンは...

異なるデータベースで DROP TABLE を書く方法

異なるデータベースで DROP TABLE を書く方法1.MySQL 存在する場合はテーブルを削除 ...

GolangでMySQLデータベースを操作するための実装コード

序文Golang は、SQL データベースにアクセスするための database/sql パッケージ...

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

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

Zabbix で監視項目と集約されたグラフを設定するためのサンプルコード

1. ローカルマシンを監視するためにZabbixエージェントをインストールするエージェントソフトウェ...

ブラウザでのjsのイベントループイベントキューの詳細な説明

目次序文スタックと2つのキューを理解する実行プロセス簡単な例より難しい例要約する序文以下の内容はブラ...

XHTML 入門チュートリアル: フォーム タグ

<br />フォームはユーザーが情報を送信するための重要なチャネルです。このセクションで...

webpack -v エラー解決

背景webpackのバージョンを確認したいのですが、webpack -vを実行するとエラーが報告され...

Oracle Rownum 書き込みに似た MySQL の詳細な例

Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...

Linuxのwatchコマンドの使用

1. コマンドの紹介watch コマンドは、指定されたコマンドを定期的に実行し、実行結果を全画面に表...

Mysql マスタースレーブ同期構成の実践の詳細な説明

1. はじめに以前、「MySQL マスター スレーブ同期の原理」という記事を書きました。この記事を読...

HTML テーブルタグチュートリアル (7): 背景色属性 BGCOLOR

テーブルの背景色は、BGCOLOR 属性を通じて設定できます。基本的な構文<テーブル BGCO...

CSS ピックアップ矢印、カタログ、アイコン実装コード

1. CSS その他のアイコンアイコンを作成するには 3 つの方法があります。写真css (小さな矢...

JavaScriptは組み込みオブジェクトのプロトタイプメソッド実装を追加します

オブジェクトがメソッドを呼び出す順序:インスタンス内にメソッドが存在しない場合は、インスタンス オブ...