コーディングをしていると、多くのことが同じ結末を迎えることに気づくでしょう。問題を解決する方法は何千通りもあり、問題を解決できる方法はどれも良い方法です。コードを非常に洗練された方法で書く必要はありません。そうしないと、後から人々が理解できなくなり、メンテナンスが面倒になります。 したがって、最も単純で最も人気のあるコードを使用すると、後のメンテナンスと開発が容易になります。 まず、背景パーティクルアニメーション効果のプレビューを見てみましょう。 ボタンクリックパーティクルアニメーション <div class="button"> <div class="button-text">確認</div> </div> ボタンは台形なので、前のコードでは台形を実装するためにボタン セレクターに疑似クラスを追加しており、パーティクルを実装するには別の要素レイヤー (button-text) を追加することしかできません。 .ボタンテキスト{ 位置: 相対的; 幅: 100%; 境界線の半径: 4px; 境界線: なし; カーソル: ポインタ; } .button-text:前、 .button-text:after { 位置: 絶対; コンテンツ: ''; 表示: ブロック; 幅: 140%; 高さ: 100%; 左: -20%; Zインデックス: -1000; 背景繰り返し: 繰り返しなし; } .button-text:before { 表示: なし; 上限: -75%; 背景画像: 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、透明度20%、#fff 20%、透明度30%)、 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、透明度10%、#fff 15%、透明度20%)、 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、#fff 20%、透明 20%); 背景サイズ: 10% 10%、 20% 20%、 15% 15%、 20% 20%、 18% 18%、 10% 10%、 15% 15%、 10% 10%、 18% 18%; } .button-text:after { 表示: なし; 下限: -75%; 背景画像: 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、透明度10%、#fff 15%、透明度20%)、 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、#fff 20%、透明 20%); 背景サイズ: 15% 15%、 20% 20%、 18% 18%、 20% 20%、 15% 15%、 10% 10%、 20% 20%; } .button-text:アクティブ{ 変換: スケール(0.9); }
デフォルトの疑似要素は js を使用してクリック イベントをリッスンし、クリック後に var animateButton = function(e) { e.preventDefault; e.target.classList.remove('animate'); e.target.classList.add('アニメーション'); setTimeout(関数(){ e.target.classList.remove('animate'); },700); }; var classname = document.getElementsByClassName("ボタンテキスト"); (var i = 0; i < クラス名.length; i++) { classname[i].addEventListener('click', animateButton, false); } 次にCSSを追加してアニメーションを開始します .button-text.animate:before { 表示: ブロック; アニメーション: topBubbles のイーズインアウト 0.75 秒早送り; } .button-text.animate:after { 表示: ブロック; アニメーション: bottomBubbles のイーズインアウト 0.75 秒早送り; } @keyframes トップバブル { 0% { 背景位置: 5% 90%、 10% 90%、 10% 90%、 15% 90%、 25% 90%、 25% 90%、 40% 90%、 55% 90%、 70% 90%; } 50% { 背景位置: 0% 80%、 0% 20%、 10% 40%、 20% 0%、 30% 30%、 22% 50%、 50% 50%、 65% 20%、 90% 30%; } 100% { 背景位置: 0% 70%、 0% 10%、 10% 30%、 20% -10%、 30% 20%、 22% 40%、 50% 40%、 65% 10%、 90% 20%; 背景サイズ: 0% 0%、 0% 0%、 0% 0%、 0% 0%、 0% 0%、 0% 0%; } } @keyframes ボトムバブル { 0% { 背景位置: 10% -10%、 30% 10%、 55% -10%、 70% -10%、 85% -10%、 70% -10%、 70% 0%; } 50% { 背景位置: 0% 80%、 20% 80%、 45% 60%、 60% 100%、 75% 70%、 95% 60%、 105% 0%; } 100% { 背景位置: 0% 90%、 20% 90%、 45% 70%、 60% 110%、 75% 80%、 95% 70%、 110% 10%; 背景サイズ: 0% 0%、 0% 0%、 0% 0%、 0% 0%、 0% 0%、 0% 0%; } } 背景の位置を変更するには これにより、ボタンクリックのパーティクルアニメーション効果が作成されます。 同様に、背景にも同じパーティクル効果を追加できます。コードは基本的にコピーできます。 背景パーティクルエフェクト .king:before { 位置: 絶対; コンテンツ: ''; 表示: ブロック; 幅: 100%; 高さ: 100%; 上: 0; zインデックス: 1; 背景繰り返し: 繰り返しなし; 不透明度: 0.4; } .king:before { 背景画像: 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、透明度20%、#fff 20%、透明度30%)、 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、透明度10%、#fff 15%、透明度20%)、 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、#fff 20%、透明 20%)、 放射状グラデーション(円、#fff 20%、透明 20%); 背景サイズ: 10% 10%、 12% 12%、 5% 5%、 12% 12%、 5% 5%、 10% 10%、 5% 5%、 10% 10%、 5% 5%; 表示: ブロック; アニメーション: topBubbles の easy-in-out 3 秒前進、無限大; } ここでは、粒子のサイズ、透明度、レイヤー (Z インデックス) を変更します。最初にアニメーションを実行し、それを無期限にループさせます。アニメーション実行効果には、上のボタン (topBubbles) の効果を直接使用できます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: W3C組織はHTML4のスタイルに関する推奨事項を提供しています
>>: Dockerfile における VOLUME と docker -v の違い
目次Web コンテナとは何ですか? HTTP の性質HTTP リクエスト応答の例クッキーとセッション...
前のこれは古くからある古典的な質問です。以前読者から質問があったので、ここでお答えします。簡単な例か...
今日、牛南ニュースリリースシステムについて学んでいたとき、牛南先生はスクロールバーに関するいくつかの...
最近、古い RN プロジェクトを Xcode で実行すると、次のコード エラーが報告されました。 &...
概要Prometheus は、HTTP プロトコルを介してリモート マシンからデータを収集し、ローカ...
この記事では、例を使用して、MySQL サーバーのスレッド数を表示する方法について説明します。ご参考...
「通常 1em=16px」と言うのはなぜですか?ユーザーのブラウザによってレンダリングされるデフォル...
1. Canvas画像をCSS背景画像として使用するCSS ペイント API は、Canvas キャ...
html4:コードをコピーコードは次のとおりです。 <フォーム> <p>&l...
1. コンポーネント First.js にはサブコンポーネントがあります。 './Admin...
HTML スタイル タグスタイルタグ - ドキュメント内でスタイルを宣言するときにこのタグを使用しま...
この記事では、jsネイティブウォーターフォールフロープラグインの具体的なコードを参考までに共有します...
目次Dockerfileを使用してDockerイメージを構築する1. Dockerfile とは何で...
Nginx を Web サーバーとして使用する際に、次の問題が発生しました。 1. nginxの起動...
目次1. MHAの紹介1. MHAとは何ですか? 2. MHAの構成3. MHAの特徴2. MySQ...