オリジナルリンク https://github.com/XboxYan/no… ボタンは、おそらく Web ページ上で最も一般的なコンポーネントの 1 つです。そのほとんどは目立たないものです。そのようなボタンを見つけたら、それを何度かクリックしたくなるでしょうか? 通常、この種の効果に対する最初の反応は、次のケースのように その効果はさらに衝撃的です。もちろん、 パーティクルを生成する
<ボタン> ボタン <i></i> <i></i> <i></i> <i></i> <i></i> ... </ボタン> 一般的に言えば、私はこのアプローチはあまり好きではありません。タグが多すぎるし、構造が美しくなく、既存のページに他の影響を与える可能性があります(多くの場合、元の それでは、 1.ボックスシャドウ まずは .button::before{ 位置: 絶対; コンテンツ: ''; 幅: 5px; 高さ: 5px; 境界線の半径: 50%; 背景色: #ff0081; box-shadow: 10px 10px #ff0081,15px 0px 0 2px #ff0081,20px 15px 0 3px #ff0081,...;/*無限オーバーレイ*/ } ある程度の効果はありますが、デバッグに時間がかかります。パーティクルの位置とサイズは主にオフセットと拡張によって決まります。 しかし、ここでのオフセットは 2. 背景画像 CSS3では、 .myclass { 背景: 背景1、背景2、/*...*/ 背景N; } ここでは .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%、...; } ここで、 これにより、単純なパーティクル効果が作成されます。 動き出そう
アニメーション効果は非常にシンプルで、粒子が中心から外側に広がり、徐々に消えていくというプロセスです。 遷移 まず .button::before{ 遷移:.75秒の背景位置のイーズインアウト、75秒の背景サイズのイーズインアウト; } .button:hover::before{ 背景位置: 5% 44%、-5% 20%、7% 5%...; 背景サイズ: 0% 0%; } もちろん、このように直接設定するのは決して理想的ではありません。マウスが離れると縮みます。効果は次のようになります マウスが立ち去るときに縮まないようにする必要があります。どうすればこれを実現できるでしょうか? とても簡単です。 .button:hover::before{ 背景位置: 5% 44%、-5% 20%、7% 5%...; 背景サイズ: 0% 0%; 遷移:.75秒の背景位置のイーズインアウト、75秒の背景サイズのイーズインアウト; } 少しは気分が良くなりましたか?表示するにはここをクリックしてください。 クリック時にパーティクルアニメーションを表示したい場合はどうすればよいでしょうか?ここでは .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%、...; } このデモをチェックしてみてください なぜ アニメーション
.button::before{ /*...*/ アニメーション: 泡が 0.75 秒早送りでイーズイン アウトします。 } .button:active::before { animation: none; /*ここでアニメーションをキャンセルできることに注意してください*/ 背景サイズ: 0; } @keyframes バブル { 0% { 背景位置: 18% 40%、...; } 50% { 背景位置: 10% 44%、...; } 100% { 背景位置: 5% 44%、...; 背景サイズ: 0% 0%; } } ソースコードはここでご覧いただけます。 唯一の欠点は、初期化アニメーションが 1 回実行されることです。 まとめ 上記では、パーティクル アニメーション ボタンの純粋な CSS 実装を紹介しています。利点は明らかです。ネイティブ プロジェクトでも まだいくつか欠点があります。例えば、上記の配置は作業負荷が密集しています。プロジェクト全体が完了した後にこれらの機能を微調整することをお勧めします。また、作業負荷を軽減するためにいくつかの視覚化ツールを作成してみることもできます。それだけです。 要約する 上記はエディターが紹介した CSS パーティクル ダイナミック ボタン エフェクトです。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます! |
<<: el-table ヘッダーでテキストを折り返す 3 つの方法の詳細な説明
ケースの説明: - ページ効果を実現するためにテーブルを使用する- ハイパーリンクを機能させたくない...
現象: MySQL バージョン 5.7 以降では、日付型と日付時刻型のデフォルト値が「0000-00...
では、GIF、PNG、JPG のどの形式を候補形式として選択すればよいのでしょうか。また、どの画像形...
CentOS でカーネル モジュールを自動的にロードするには、/etc/sysconfig/modu...
目次序文開発環境新しいプロジェクトを作成するモバイルウェブプロジェクト角度付きJSONパブリックモジ...
目次nginxとは1. 必要な依存関係をダウンロードする2. nginxの圧縮パッケージをダウンロー...
<br />この例では、主に onblur と onFocus という 2 つのパラメー...
1. リンク解除機能ハード リンクの場合、unlink はディレクトリ エントリを削除し、inode...
1. 準備1.1 港ダウンロードハーバーダウンロードアドレス:リンクリンクの説明を追加し、必要なバー...
1. スクロールの実装原理better-scroll のスクロール原理は、ブラウザのネイティブスクロ...
1. Linux で Selenium を使用する1. Chromeをインストールする次のコマンドを...
docker exec コマンドは、実行中のコンテナ内でコマンドを実行できます。 docker ex...
質問アップロードするファイルのタイプを accept に追加することは、「表面的な」役割しか果たしま...
クロスドメインソリューションjsonp (get をシミュレート) CORS (クロスオリジンリソー...
このメモはインストール チュートリアルです。実用的な意味はありません。記録のためだけに書いています。...