序文 こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。 これは、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へのリアルタイム同期ソリューションの詳細な説明
スクロール バーのスタイルを設定するための CSS 実装コードは次のとおりです。 •::-webki...
この記事では、MySQL group_concat を使用してグループ化されたフィールドを 1 つの...
序文コードを書くと、時々基数変換の問題に遭遇します。一般的な変換には、2進数、8進数、10進数、16...
以下のように表示されます。名前説明する文字可変(n)、varchar(n)長さ制限あり、可変長文字(...
前回の記事では、MySQL 5.7.19 無償インストール版 (64 ビット) の設定方法についての...
HTML ファイルとは何ですか? HTML は Hyper Text Markup Language...
Windows と Linux 間でファイルを転送する場合は、Xftp ツールを使用できます。この...
1. コマンドの紹介ln コマンドは、ファイルのリンクを作成するために使用されます。リンクは、ハード...
最初に書くこの記事では、ELK 7.3.0 の展開についてのみ説明します。展開環境:システムセントO...
目次DockerのインストールNvidia-docker のインストールDockerのインストール1...
1. プラグインを追加し、pomファイルの下に次の設定を追加します。 <!-- mybatis...
背景画像でも、ページ上のテキストサイズでも、1 ピクセルの違いは非常に明白です。そして、私は学生時代...
fd コマンドは、Linux ファイル システムを検索するためのシンプルで簡単な方法を提供します。...
HTML で CSS を使用する 3 つの方法: 1. インラインスタイル: 要素のスタイル属性を通...
目次1. イメージをプルする2. Redisコンテナを作成する3. コンテナを起動するためにクラスタ...