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