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

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

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

動き出そう

background-image CSSアニメーションをサポートしていませんが、他の 2 つのbackground-sizebackground-positionサポートしているため、 CSS transitionCSS 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%、...;
}

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

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

アニメーション

animationtransitionの実装原理は似ています。利点は、より洗練されたアニメーションを作成できることです。 :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 つの方法の詳細な説明

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

推薦する

HTMLはフォームタグを使用して登録ページのサンプルコードを実装します。

ケースの説明: - ページ効果を実現するためにテーブルを使用する- ハイパーリンクを機能させたくない...

Mysql データベースの日付と日時型でデフォルト値 0000-00-00 を設定するときに発生するエラー問題の詳細な説明

現象: MySQL バージョン 5.7 以降では、日付型と日付時刻型のデフォルト値が「0000-00...

ウェブ画像形式としてPNG、JPG、GIFを選択して使用する方法

では、GIF、PNG、JPG のどの形式を候補形式として選択すればよいのでしょうか。また、どの画像形...

CentOS 起動時にカーネルモジュール overlayfs 操作を自動的にロードする

CentOS でカーネル モジュールを自動的にロードするには、/etc/sysconfig/modu...

Angularの単一プロジェクトを複数プロジェクトにアップグレードするプロセス全体

目次序文開発環境新しいプロジェクトを作成するモバイルウェブプロジェクト角度付きJSONパブリックモジ...

LinuxにNginxを素早くインストールする方法

目次nginxとは1. 必要な依存関係をダウンロードする2. nginxの圧縮パッケージをダウンロー...

ウェブページ入力ボックスのスタイルトリガー効果

<br />この例では、主に onblur と onFocus という 2 つのパラメー...

Linux のリンク解除機能とファイルの削除方法

1. リンク解除機能ハード リンクの場合、unlink はディレクトリ エントリを削除し、inode...

ドッカー専用倉庫港湾建設プロセス

1. 準備1.1 港ダウンロードハーバーダウンロードアドレス:リンクリンクの説明を追加し、必要なバー...

Vue は better-scroll を使用して水平スクロール方法の例を実現します

1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...

LinuxベースのSelenium環境を構成し、操作を実装する

1. Linux で Selenium を使用する1. Chromeをインストールする次のコマンドを...

Docker execは複数のコマンドを実行します

docker exec コマンドは、実行中のコンテナ内でコマンドを実行できます。 docker ex...

Element-ui アップロードファイルのアップロード制限の解決策

質問アップロードするファイルのタイプを accept に追加することは、「表面的な」役割しか果たしま...

JS クロスドメイン ソリューション React 構成 リバース プロキシ

クロスドメインソリューションjsonp (get をシミュレート) CORS (クロスオリジンリソー...

VMware Workstation 15 Pro に Ubuntu 1804 をインストールするチュートリアル (画像とテキスト付き)

このメモはインストール チュートリアルです。実用的な意味はありません。記録のためだけに書いています。...