パーティクルダイナミックボタン効果を実現するCSS

オリジナルリンク

https://github.com/XboxYan/no…

ボタンは、おそらく Web ページ上で最も一般的なコンポーネントの 1 つです。そのほとんどは目立たないものです。そのようなボタンを見つけたら、それを何度かクリックしたくなるでしょうか?

通常、この種の効果に対する最初の反応は、次のケースのようにcanvasを使用することです。

その効果はさらに衝撃的です。もちろん、 canvas実装にも一定の閾値があり、実際に使用するには少し面倒です (すべてのjs実装に共通する問題)。ここでは、 CSS実装方法を試します。

パーティクルを生成する

jsソリューションの他に、 HTMLおよびCSS実装もあります。言うまでもなく、 HTML単なるタグの集まりです。

<ボタン>
    ボタン
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    ...
</ボタン>

一般的に言えば、私はこのアプローチはあまり好きではありません。タグが多すぎるし、構造が美しくなく、既存のページに他の影響を与える可能性があります（多くの場合、元のHTML構造を変更するのは便利ではありません）。

それでは、 CSS実装方法を見てみましょう。主な方法は 2 つあります。実際には、どの属性を無限に重ね合わせることができるかを考えるだけです。1 つはbox-shadowで、もう 1 つはbackground-imageです (CSS3 は無限の重ね合わせをサポートしています)。

1.ボックスシャドウ

まずはbox-shadowメソッドを見てみましょう。余分なタグの使用を避けるために、ここでは疑似要素が使用されています。

.button::before{
  位置: 絶対;
  コンテンツ： '';
  幅: 5px;
  高さ: 5px;
  境界線の半径: 50%;
  背景色: #ff0081;
  box-shadow: 10px 10px #ff0081,15px 0px 0 2px #ff0081,20px 15px 0 3px #ff0081,...;/*無限オーバーレイ*/
}

ある程度の効果はありますが、デバッグに時間がかかります。パーティクルの位置とサイズは主にオフセットと拡張によって決まります。

しかし、ここでのオフセットはpx単位のみで、ボタンのサイズにうまく適応できないため、ここでは2番目の方法を使用して実現します。

2. 背景画像

CSS3では、 background-image無限に重ねることができます。

.myclass {
  背景: 背景1、背景2、/*...*/ 背景N;
}

ここではradial-gradientを使用して複数の小さなドットを実現できます。

.button::before{
  位置: 絶対;
  コンテンツ： '';
  左: -2em;
  右: -2em;
  上: -2em;
  下: -2em;
  ポインタイベント: なし;
  背景繰り返し: 繰り返しなし;
  背景画像: 放射状グラデーション(円、#ff0081 20%、透明度 0)、 
  放射状グラデーション(円、#ff0081 20%、透明度0)、
  放射状グラデーション(円、#ff0081 20%、透明度0)、 
  放射状グラデーション(円、#ff0081 20%、透明度0)、 
  ...;
  背景サイズ: 10% 10%、20% 20%、15% 15%、...;
  背景位置: 18% 40%、20% 31%、30% 30%、...;
}

ここで、 background-sizeとbackground-position主に原点のサイズと位置を制御するために使われます。複雑に思えますが、実際にはbackground-sizeとbackground-position background-image位置に一つずつ対応していれば大丈夫です。実際の開発ではデバッグが少し難しいかもしれません。キーボードの上下左右のキーを使ってコンソール上で直接リアルタイムプレビュー効果を微調整することができます（可視化ツールを作ることも検討できます）。

これにより、単純なパーティクル効果が作成されます。

動き出そう

background-image CSSアニメーションをサポートしていませんが、他の 2 つのbackground-sizeとbackground-positionサポートしているため、 CSS transitionとCSS animationを使用できます。

アニメーション効果は非常にシンプルで、粒子が中心から外側に広がり、徐々に消えていくというプロセスです。

遷移

まず:hoverインタラクションを見てみましょう

.button::before{
  遷移:.75秒の背景位置のイーズインアウト、75秒の背景サイズのイーズインアウト;
}
.button:hover::before{
  背景位置: 5% 44%、-5% 20%、7% 5%...;
  背景サイズ: 0% 0%;
}

もちろん、このように直接設定するのは決して理想的ではありません。マウスが離れると縮みます。効果は次のようになります

マウスが立ち去るときに縮まないようにする必要があります。どうすればこれを実現できるでしょうか?

とても簡単です。 :hoverの下にtransitionを設定するだけです。つまり、マウスがその上を通過したときにのみトランジションが発生し、マウスがその上を離れたときには発生しません。

.button:hover::before{
  背景位置: 5% 44%、-5% 20%、7% 5%...;
  背景サイズ: 0% 0%;
  遷移:.75秒の背景位置のイーズインアウト、75秒の背景サイズのイーズインアウト;
}

少しは気分が良くなりましたか？表示するにはここをクリックしてください。

クリック時にパーティクルアニメーションを表示したい場合はどうすればよいでしょうか?ここでは:active疑似クラスを使用する必要があります。

:hoverロジックに従うと、

.button:active::before{
  背景位置: 5% 44%、-5% 20%、7% 5%...;
  背景サイズ: 0% 0%;
  遷移:.75秒の背景位置のイーズインアウト、75秒の背景サイズのイーズインアウト;
}

残念ながら、これはボタンを押した時にしか発動しません。マウスを離すと消えてしまいます。このとき、角度を変える必要があります。次のように想像できます。デフォルトでは発散しており、クリックすると収束し、持ち上げると以前の発散状態に戻ります。同時に、クリック時に遷移効果をキャンセルする必要があります。

.button::before {
    /*...*/
    背景位置: 5% 44%...;/*拡散状態*/
    背景サイズ: 0% 0%;
    遷移: background-position .5s の easy-in-out、background-size .75s の easy-in-out;
}

.button:active::before {
  transition:0s;/**トランジションをキャンセルするための注意**/
  背景サイズ: 10% 10%、20% 20%...;
  背景位置: 18% 40%、20% 31%、...;
}

このデモをチェックしてみてください

なぜ:activeにtransition:0s必要なのでしょうか？追加せずに試してみると、次のように効果がわかります。

アニメーション

animationとtransitionの実装原理は似ています。利点は、より洗練されたアニメーションを作成できることです。 :activeメソッドを例に挙げてみましょう。

.button::before{
  /*...*/
  アニメーション: 泡が 0.75 秒早送りでイーズイン アウトします。
}
.button:active::before {
  animation: none; /*ここでアニメーションをキャンセルできることに注意してください*/
  背景サイズ: 0;
}
@keyframes バブル {
  0% {
    背景位置: 18% 40%、...;
  }
  50% {
    背景位置: 10% 44%、...;
  }
  100% {
    背景位置: 5% 44%、...;
    背景サイズ: 0% 0%;
  }
}

ソースコードはここでご覧いただけます。

唯一の欠点は、初期化アニメーションが 1 回実行されることです。

まとめ

上記では、パーティクルアニメーションボタンの純粋な CSS 実装を紹介しています。利点は明らかです。ネイティブプロジェクトでもreactプロジェクトでも、 CSSをコピーしてプロジェクトに直接投入し、使用することができます。イベントや追加のロジック処理をバインドする必要がないため、既存のエクスペリエンスが向上します。想像してみてください、これが「購入」ボタンだったら、もっと買うきっかけになるでしょうか？とにかく、私は間違いなくそれに惹かれます、ハハハ〜

まだいくつか欠点があります。例えば、上記の配置は作業負荷が密集しています。プロジェクト全体が完了した後にこれらの機能を微調整することをお勧めします。また、作業負荷を軽減するためにいくつかの視覚化ツールを作成してみることもできます。それだけです。

要約する

上記はエディターが紹介した CSS パーティクルダイナミックボタンエフェクトです。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: el-table ヘッダーでテキストを折り返す 3 つの方法の詳細な説明

>>: 複雑なウェブサイトのナビゲーションを簡素化