序文 こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。 これは、Google では、 アイデア 実際、これはアニメーションであり、完全な円が小さいものから大きいものへと成長します。これは サンプルコード @keyframes リップル{ から { 変換: スケール(0); 不透明度: 1; } に { 変換: スケール(1); 不透明度: 0; } } サンプルコード var btn = document.getElementById('btn'); btn.addeventlistener('click',function(){ addClass(btn,'アニメーション') }、間違い) btn.addeventlistener('transitionend',function(){//CSS3 アニメーションの終了をリッスンします。removeClass(btn,'animate') }、間違い) では、CSS を通じてアニメーションをトリガーするにはどうすればよいでしょうか? CSS実装
多くの場合、ページ上の効果は まずは試してみましょう。 構造 これは私たちが書いたページの構造とスタイルです <スタイル> .btn{ 表示: ブロック; 幅: 300ピクセル; アウトライン: 0; オーバーフロー: 非表示; 位置: 相対的; 遷移: .3秒; カーソル: ポインタ; ユーザー選択: なし; 高さ: 100px; テキスト配置: 中央; 行の高さ: 100px; フォントサイズ: 50px; 背景:トマト; 色: #fff; 境界線の半径: 10px; } </スタイル> <a class="btn">ボタン</a> 非常にシンプルで、普通のボタンスタイルです 次に、ボタンに必要な完全な円を追加します。 これを実現するために疑似要素を使用します .btn:後{ コンテンツ: ''; 位置: 絶対; 幅: 100%; パディング上部: 100%; 背景: 透明; 境界線の半径: 50%; 左: 50%; 上位: 50%; 変換: translate(-50%,-50%) } 上に 次に、スケーリングアニメーションを作成します @keyframes リップル{ から { 変換: translate(-50%,-50%) スケール(0); /** 変換属性はデフォルトで記述されているので、ここで translate(-50%,-50%) を追加する必要があります。そうしないと、置き換えられてしまいます**/ 背景: rgba(0,0,0,.25); } に { 変換: translate(-50%,-50%) スケール(1); 背景: 透明; } } ホバー小さなインタラクティブ体験 マウスをかざしてみますか? .btn:hover:after{ アニメーション: リップル 1 秒; } 効果は良いのですが、マウスを速く動かしすぎると、拡大した円がすぐに縮小してしまうので、少し不安定です。 しかし、これは私たちが望んでいる効果ではありません。私たちが望んでいるのは、単にそこに置いて二度とトリガーされないようにするのではなく、クリックごとに 1 回トリガーされることです。 アクティブトライ 日常業務では、 .btn:active:after{ アニメーション: リップル 1 秒; } 効果も不十分で、マウスを押したままにしているのと少し似ていて、完全にトリガーするにはマウスを押したままにする必要があります。たとえば、上記の例では、アニメーションは フォーカスエクスペリエンス 任意の要素にフォーカスを当てる必要がある場合は、その要素に <a class="btn" tabindex="1">ボタン</a> .btn:focus:after{ アニメーション: リップル 1 秒; } 解決策はないのでしょうか? もちろんいくつかあります。最後のが間違いなく解決策です、ハハハ チェック済み
<ラベルクラス="btn"> <input type="checkbox"><span>ボタン</span> </ラベル> ここでは スタイルを追加する .btn>span:after{ /**セレクタを変更する**/ } .btn>入力[type=チェックボックス]{ 表示: なし } .btn>input[type=checkbox]:checked+span:after{ アニメーション: リップル 1 秒; } これによってアニメーションをトリガーすることもできますが、問題は、もう一度クリックすると選択が解除されることです。アニメーションをトリガーするにはどうすればよいでしょうか? 実際、それは .btn>input[type=checkbox]:not(:checked)+span:after{ アニメーション: リップル 1 秒; } 一見すると、かなり巧妙に思えますが、よく考えてみると、表裏両方にアニメーションが書かれているので、 .btn>input[type=checkbox]+span:after{ アニメーション: リップル 1 秒; } 無限サイクル… この問題は長い間私を悩ませてきましたが、神は一生懸命働く人を失望させません。その後、2つの状態で異なるアニメーションをトリガーしようとしましたが、次のように個別にトリガーできます。 .btn>input[type=checkbox]:checked+span:after{ アニメーション: リップル1 1秒; } .btn>input[type=checkbox]:not(:checked)+span:after{ アニメーション: リップル2 1秒; } これは簡単に理解できるはずです。 さて、ここからがポイントです。ripple1 と これは非常に簡単です。デフォルトの状態を設定し、状態を選択して、異なる名前のアニメーションをトリガーするだけです。 .btn>input[type=checkbox]+span:after{ アニメーション: リップルイン 1 秒; } .btn>input[type=checkbox]:checked+span:after{ アニメーション: リップルアウト 1 秒; } @keyframes リップルイン{ から { 変換: translate(-50%,-50%) スケール(0); 背景: rgba(0,0,0,.25); } に { 変換: translate(-50%,-50%) スケール(1); 背景: 透明; } } @keyframes ripple-out{/*名前だけが異なります*/ から { 変換: translate(-50%,-50%) スケール(0); 背景: rgba(0,0,0,.25); } に { 変換: translate(-50%,-50%) スケール(1); 背景: 透明; } } 効果は記事の冒頭で示した通り、完璧です 完全なデモは次のとおりです https://codepen.io/xboxyan/pen/Jmvyex/ いくつかの欠点 上記のアニメーション スタイルはデフォルトでトリガーされるため、ページが読み込まれるとボタン上の水滴アニメーションが 1 回移動するのがわかりますが、特に目立つわけではなく、受け入れられるものではありません。 第二に、実際の効果は、マウスがクリックされたポイントから広がるはずです。私たちの CSS では、これは確かにできず、中心から広がることしかできず、これも妥協点です。ここでアイデアがあります。CSS 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: MySQLからOracleへのリアルタイム同期ソリューションの詳細な説明
1. コマンドの紹介usermod (ユーザー変更) コマンドは、ユーザー アカウントを変更するため...
目次これ方法オブジェクト内これを隠した厳密モードこれを変更してこれいつものように、まずはコードを見て...
目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...
CSS3 カテゴリ メニューの効果は次のとおりです。 html <html> <ヘ...
<br />今は情報爆発の時代であるだけでなく、サービス爆発の時代でもあります。それはす...
序文Linux が完全にセットアップされると、クローン機能を使用して短時間で複数の Linux を作...
MySql での時間比較の実装unix_timestamp() unix_timestamp 関数は...
1. 環境整備CentOS Linux リリース 7.5.1804 (コア)インストールフォルダを作...
目次1. 再出発1.1. ストア(司書) 1.2. 状態(書籍) 1.3. アクション(図書貸出リス...
はじめに:今日は、サーバー上のMySQLにリモート接続したいと思います。使用するソフトウェアはNav...
簡単な説明適切な読者: モバイル開発sqlite3 データを mysql に移行する場合、多くの構文...
例示するMySql Community Edition は、5.7.11 以降、テーブルベースのデー...
この記事の例では、雨滴効果を実現するためのキャンバスの具体的なコードを参考までに共有しています。具体...
http1.1 プロトコルのデフォルトのリクエスト ヘッダーでは、図に示すように、デフォルトで ke...
yum install mysql-serverと入力します。続行するにはYを押してくださいインスト...