CSS3はキングをマッチングさせるときにパーティクルアニメーション効果を実現します

CSS3はキングをマッチングさせるときにパーティクルアニメーション効果を実現します

コーディングをしていると、多くのことが同じ結末を迎えることに気づくでしょう。問題を解決する方法は何千通りもあり、問題を解決できる方法はどれも良い方法です。コードを非常に洗練された方法で書く必要はありません。そうしないと、後から人々が理解できなくなり、メンテナンスが面倒になります。

したがって、最も単純で最も人気のあるコードを使用すると、後のメンテナンスと開発が容易になります。

まず、背景パーティクルアニメーション効果のプレビューを見てみましょう。

ボタンクリックパーティクルアニメーション

<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);
}

button-text疑似要素にbackground-imageを追加し、 radial-gradientを使用して複数の円を粒子として描画します。

transform: scale(0.9)マウスがクリックされたときにbutton-text要素を拡大縮小します。

デフォルトの疑似要素はdisplay: none; hidden であることがわかるはずです。したがって、クリックすると、セレクターを追加して表示し、アニメーションを実行する必要があります。

js を使用してクリック イベントをリッスンし、クリック後にanimateセレクターを追加します。

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%;
  }
}

背景の位置を変更するにはbackground-positionを使用し、サイズを変更するにはbackground-size使用し、アニメーション効果を作成します。

これにより、ボタンクリックのパーティクルアニメーション効果が作成されます。

同様に、背景にも同じパーティクル効果を追加できます。コードは基本的にコピーできます。

背景パーティクルエフェクト

.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 の違い

推薦する

Tomcat コアコンポーネントとアプリケーションアーキテクチャの詳細な説明

目次Web コンテナとは何ですか? HTTP の性質HTTP リクエスト応答の例クッキーとセッション...

CSS マージンの折りたたみの詳細な説明

前のこれは古くからある古典的な質問です。以前読者から質問があったので、ここでお答えします。簡単な例か...

HTML でスクロールバーを使用する際のヒントを共有する

今日、牛南ニュースリリースシステムについて学んでいたとき、牛南先生はスクロールバーに関するいくつかの...

React Native が「NSArray<id<RCTBridgeModule>>型のパラメータを初期化できません」というエラーを報告する (解決方法)

最近、古い RN プロジェクトを Xcode で実行すると、次のコード エラーが報告されました。 &...

PrometheusとGrafanaを使用したMySQLサーバーのパフォーマンス監視の詳細な説明

概要Prometheus は、HTTP プロトコルを介してリモート マシンからデータを収集し、ローカ...

MySQLサーバのスレッド数を表示する方法の詳細な説明

この記事では、例を使用して、MySQL サーバーのスレッド数を表示する方法について説明します。ご参考...

CSSでemを開く正しい方法の詳細な説明

「通常 1em=16px」と言うのはなぜですか?ユーザーのブラウザによってレンダリングされるデフォル...

CSS ペイント API: CSS のような描画ボード

1. Canvas画像をCSS背景画像として使用するCSS ペイント API は、Canvas キャ...

HTML4とHTML5の違い: 入力にフォーカス実装コードを追加する方法

html4:コードをコピーコードは次のとおりです。 <フォーム> <p>&l...

React構成サブルーティングの実装

1. コンポーネント First.js にはサブコンポーネントがあります。 './Admin...

HTML スタイル タグと関連する CSS リファレンスの詳細な説明

HTML スタイル タグスタイルタグ - ドキュメント内でスタイルを宣言するときにこのタグを使用しま...

jsネイティブウォーターフォールフロープラグイン制作

この記事では、jsネイティブウォーターフォールフロープラグインの具体的なコードを参考までに共有します...

Dockerfileを使用してDockerイメージを構築する

目次Dockerfileを使用してDockerイメージを構築する1. Dockerfile とは何で...

Nginx の起動に失敗した場合のいくつかのエラー処理の詳細な説明

Nginx を Web サーバーとして使用する際に、次の問題が発生しました。 1. nginxの起動...

MySQL MHA の高可用性構成とフェイルオーバーの詳細な導入手順

目次1. MHAの紹介1. MHAとは何ですか? 2. MHAの構成3. MHAの特徴2. MySQ...