CSS+JS で水滴の波紋アニメーションボタン効果を実装するサンプルコード

コードは次のようになります。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        .btn{ 
            表示: ブロック; 
            幅: 300ピクセル; 
            高さ: 100px;
            マージン: 50px; 
            アウトライン: 0; 
            オーバーフロー: 非表示;  
            位置: 相対的; 
            遷移: .3秒; 
            カーソル: ポインタ; 
            ユーザー選択: なし;  
            テキスト配置: 中央; 
            行の高さ: 100px; 
            フォントサイズ: 50px; 
            背景：トマト; 
            色: #fff;  
            境界線の半径: 10px;
        }
        .btn>span{ 
            位置: 絶対; 
            左: 0; 
            上: 0;
            幅: 100%; 
            高さ: 100%;}
        .btn>span:after{ 
            コンテンツ： ''; 
            位置: 絶対; 
            背景: 透明; 
            境界線の半径:50%; 
            幅: 100%; 
            パディング上部: 100%; 
            左マージン: -50%; 
            上マージン: -50%; 
            左: var(--x,-100%); 
            上: var(--y,-100%); 
        }
        .btn:アクティブ{ 
            背景:オレンジ色;
        }
        .btn>入力[type=チェックボックス]{
            表示: なし
        }
        .btn>input[type=checkbox]+span:after{
            アニメーション: リップルイン 1 秒;
        }
        .btn>input[type=checkbox]:checked+span:after{
            アニメーション: リップルアウト 1 秒;
        }
        @keyframes リップルイン{
            から {
                変換: スケール(0);
                背景: rgba(0,0,0,.25)
            }
            に {
                変換: スケール(1.5);
                背景: 透明
            }
        }
        @keyframes リップルアウト{
            から {
                変換: スケール(0);
                背景: rgba(0,0,0,.25)
            }
            に {
                変換: スケール(1.5);
                背景: 透明
            }
        }
    </スタイル>
</head>
<本文>
    <ラベルクラス="btn"タブインデックス="1">
        <input type="checkbox"><span onclick="ripple(this,event)">ボタン</span>
    </ラベル>
</本文>

<スクリプト>
    関数リップル(dom,ev){
        コンソール.log(ev)
        var x = ev.offsetX;
        var y = ev.offsetY;
        dom.style.setProperty('--x',x+'px');
        dom.style.setProperty('--y',y+'px');
}
</スクリプト>
</html>

ここに画像の説明を挿入

これで、CSS + JS で水滴の波紋アニメーションボタン効果を実装するサンプルコードに関するこの記事は終了です。より関連性の高い CSS 水滴の波紋アニメーションボタンコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。

<<: ウェブページの色特性の分類

>>: Nginx+Tomcat 負荷分散クラスタのインストールと構成のケースの詳細な説明