サイバーパンクスタイルのボタンを実現するためのHTML+CSS

まず効果を見てみましょう:

ここに画像の説明を挿入

序文：

このアイデアは、Bilibili のアップロード者 Steven を見て思いつきました。素晴らしいと思ったので、自分でも作ってみました。 (純粋な CSS)、詳細なプロセスは次のとおりです。最後に完全なコードがあります。

成し遂げる：

1. まず、クラス名が .anniu のボタンとして div タグを定義します。

 <div class="anniu">オーロラの夜</div>

2. .anniu の基本的な CSS スタイル、長さ、幅、フォントサイズなど:

.anniu,.anniu::after{
           フォントファミリー: 'Do Hyeon'、サンセリフ;
           幅: 260ピクセル;
           高さ: 80px;
           テキスト配置: 中央;
           フォントサイズ: 22px;
           行の高さ: 80px;
           色: rgb(255, 251, 251);
           背景: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%, rgb(0, 255, 149) 95%);
           ボックスシャドウ: 5px 0 0 rgb(0, 204, 255);
           カーソル: ポインタ;
           位置: 相対的;
       }

font-family: 'Do Hyeon'、sans-serif; はフォントを表します。この Web サイトにアクセスすると、さまざまな種類のフォントが表示されます。
背景: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%, rgb(0, 255, 149) 95%);
背景色を巧みに使って、角を切り取った形を作りましょう。このステートメントは、グラデーションカラーが 30 度の角度から始まり、0 ～ 10% で透明色が表示され、10% ～ 95% でオレンジ色が表示され、95% ～ 100% で緑色が表示されることを意味します。
box-shadow: 5px 0 0 rgb(0, 204, 255); は右側の青い影を表します。
cursor: ポインター; は、マウスがその上を通過すると矢印が小さな手の形に変わることを意味します。

3. .anniu とまったく同じように見える double 疑似クラスを定義し、絶対位置指定によって .anniu をカバーします。手順 2 の .anniu のユニオンセレクターで同じ基本スタイルが定義されています。次のスタイルを追加します。

.anniu::after{
           内容: 「オーロラの夜」
           位置: 絶対;
           上: 0;
           左: 0;
           テキストシャドウ: -5px -2px 0 rgb(0, 183, 255),
           5px 2px 0 rgb(0, 255, 115);
           可視性: 非表示;
          
       }

テキストシャドウ: -5px -2px 0 rgb(0, 183, 255),
5px 2px 0 rgb(0, 255, 115); はフォントの影を表し、フォントの左上と右下にそれぞれ rgb(0, 183, 255) と rgb(0, 255, 115) の色の影が付きます。
visibility: hidden; は、この疑似クラスを非表示にすることを意味します。

4. clip-path: inset() プロパティを使用して領域をクリップし、transform: translate(); を使用して効果を 1 回オフセットします。
具体的な意味は次のとおりです。
clip-path: inset() は、クリッピングを使用して要素の表示可能な領域 (長方形) を作成し、領域内の部分が表示され、領域外の部分が非表示になることを意味します。
transform: translate() は移動を意味します。

例えば、double疑似クラスをクリッピングすると、clip-path: inset(20% -5px 60% 0); transform: translate（-5px，0）; 結果は次のようになります。

ここに画像の説明を挿入

(20% -5px 60% 0); は、クロッピング疑似クラスが上から下に 20% をクロッピングし、右から左に -5px をクロッピングし (負の値は影を表示する必要があるため)、下から上に 60% をクロッピングし、左から右に 0% をクロッピングすることを意味します。このようにすると、高さ 20%、幅 5px の長方形部分だけが残ります。残りのクロッピングされた端は非表示になります。同時に、上記の効果を実現するために、translate() を少し左にオフセットするように設定します。

次に、疑似クラス効果をさらに 3 回トリミングします。
clip-path: inset(50% -5px 30% 0); 取得:

ここに画像の説明を挿入

clip-path: inset(80% -5px 5% 0); 取得:

ここに画像の説明を挿入

clip-path: inset(0 -5px 80% 0); 取得:

ここに画像の説明を挿入

5. 4番目のステップで切り取り効果を設定した後、アニメーションを設定できます。マウスが通過すると、疑似クラスのさまざまな切り取り効果とオフセット効果が表示されます。切り取り位置とオフセット位置は、自分の感覚に合わせて設定できます。

 .anniu:hover::after{
           アニメーション：san1s; 
           アニメーションタイミング関数: steps(1, end);
       }

 @keyframesさん{
           0%{
            クリップパス: インセット(20% -5px 60% 0);
            変換: translate(-6px,5px);
            可視性: 可視;
           }
           10%
            クリップパス: インセット(50% -5px 30% 0);
            変換: translate(6px,-5px);
           }
           20%
            クリップパス: インセット(20% -5px 60% 0);
            変換: translate(5px,0px);

            }
            30%
                クリップパス: インセット(80% -5px 5% 0);
            変換: translate(-8px,5px);
            }
            40%
                クリップパス: インセット(0 -5px 80% 0);
            変換: translate(-4px,-3px);

            }
            50%{
                クリップパス: インセット(50% -5px 30% 0);
            変換: translate(-6px,-5px);
            }
            60%
                クリップパス: インセット(80% -5px 5% 0);
            変換: translate(-7px,5px);

            }
            70%
                クリップパス: インセット(0 -5px 80% 0);
            変換: translate(3px,6px);
            }
            80%
                クリップパス: インセット(50% -5px 30% 0);
            変換: translate(5px,5px);

            }
            90%
                クリップパス: インセット(20% -5px 60% 0);
            変換: translate(6px,-5px);

            }
            100%{
                クリップパス: インセット(0 -5px 80% 0);
            変換: translate(1px,5px);

            }
       }

visibility: visible; 疑似クラスを可視にします。
animation-timing-function: steps(1, end); 1 は 0% から 10%、10% から 20%、... を意味します。その間は 1 フレームのみが使用されます。2 と記述すると、2 フレームになります。1 フレームのみを使用するのは、より良いスタッター効果を実現するためです。 end は、最初のフレームがアニメーションの最初のステップの開始であることを示します。 start の場合は、最初のフレームがアニメーションの最初のステップの終了であることを意味します。

完全なコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <link href="https://fonts.font.im/css?family=Do+Hyeon" rel="スタイルシート">
    <スタイル>
       *{
           マージン: 0;
           パディング: 0;
           ボックスのサイズ: 境界線ボックス;
       }
       体{
           高さ：100vh;
           ディスプレイ: フレックス;
           アイテムの位置を中央揃えにします。
           コンテンツの中央揃え: 中央;
           背景色: rgb(243, 239, 8);
       }
       .anniu,.anniu::after{
           フォントファミリー: 'Do Hyeon'、サンセリフ;
           幅: 260ピクセル;
           高さ: 80px;
           テキスト配置: 中央;
           フォントサイズ: 22px;
           行の高さ: 80px;
           色: rgb(255, 251, 251);
           背景: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%, rgb(0, 255, 149) 95%);
           ボックスシャドウ: 5px 0 0 rgb(0, 204, 255);
           カーソル: ポインタ;
           位置: 相対的;
       }
       .anniu::after{
           内容: 「オーロラの夜」
           位置: 絶対;
           上: 0;
           左: 0;
           テキストシャドウ: -5px -2px 0 rgb(0, 183, 255),
           5px 2px 0 rgb(0, 255, 115);
           可視性: 非表示;
          
       } 
       .anniu:hover::after{
           アニメーション：san1s; 
           アニメーションタイミング関数: steps(1, end);
       }

       /* 
       
       クリップパス: インセット(20% -5px 60% 0);
       クリップパス: インセット(50% -5px 30% 0);
       クリップパス: インセット(80% -5px 5% 0);
       クリップパス: インセット(0 -5px 80% 0);
       
       
        */
       @keyframesさん{
           0%{
            クリップパス: インセット(20% -5px 60% 0);
            変換: translate(-6px,5px);
            可視性: 可視;
           }
           10%
            クリップパス: インセット(50% -5px 30% 0);
            変換: translate(6px,-5px);
           }
           20%
            クリップパス: インセット(20% -5px 60% 0);
            変換: translate(5px,0px);

            }
            30%
                クリップパス: インセット(80% -5px 5% 0);
            変換: translate(-8px,5px);
            }
            40%
                クリップパス: インセット(0 -5px 80% 0);
            変換: translate(-4px,-3px);

            }
            50%{
                クリップパス: インセット(50% -5px 30% 0);
            変換: translate(-6px,-5px);
            }
            60%
                クリップパス: インセット(80% -5px 5% 0);
            変換: translate(-7px,5px);

            }
            70%
                クリップパス: インセット(0 -5px 80% 0);
            変換: translate(3px,6px);
            }
            80%
                クリップパス: インセット(50% -5px 30% 0);
            変換: translate(5px,5px);

            }
            90%
                クリップパス: インセット(20% -5px 60% 0);
            変換: translate(6px,-5px);

            }
            100%{
                クリップパス: インセット(0 -5px 80% 0);
            変換: translate(1px,5px);

            }
       }
    </スタイル>
</head>
<本文>
    <div class="anniu">オーロラの夜</div>
</本文>
</html>

html+css でサイバーパンクスタイルのボタンを実装する方法についての記事はこれで終わりです。関連する html+css サイバーパンクスタイルのボタンのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: HTML+CSS でハートビートの特殊効果を作成する

>>: 階層化されたピラミッドを実現するための HTML+CSS の例