今日は、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 で Windows にワークステーションをインストールした後、内部の仮想マシンは...
異なるデータベースで DROP TABLE を書く方法1.MySQL 存在する場合はテーブルを削除 ...
MySQL Community Server 5.7.18 の配布パッケージには .ini ファイル...
序文Golang は、SQL データベースにアクセスするための database/sql パッケージ...
目次1. SVNとは何か2. SVNサーバーとクライアントの取得方法3. SVN ワークフローとアー...
1. ローカルマシンを監視するためにZabbixエージェントをインストールするエージェントソフトウェ...
目次序文スタックと2つのキューを理解する実行プロセス簡単な例より難しい例要約する序文以下の内容はブラ...
<br />フォームはユーザーが情報を送信するための重要なチャネルです。このセクションで...
背景webpackのバージョンを確認したいのですが、webpack -vを実行するとエラーが報告され...
Rownum は、Oracle での独自の書き込み方法です。Oracle では、rownum を使用...
1. コマンドの紹介watch コマンドは、指定されたコマンドを定期的に実行し、実行結果を全画面に表...
1. はじめに以前、「MySQL マスター スレーブ同期の原理」という記事を書きました。この記事を読...
テーブルの背景色は、BGCOLOR 属性を通じて設定できます。基本的な構文<テーブル BGCO...
1. CSS その他のアイコンアイコンを作成するには 3 つの方法があります。写真css (小さな矢...
オブジェクトがメソッドを呼び出す順序:インスタンス内にメソッドが存在しない場合は、インスタンス オブ...