コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

マテリアルデザインの水滴アニメーションボタン効果を実現する純粋なcss js実装方法

不言
リリース： 2018-10-22 11:58:07
転載
3044 人が閲覧しました

この記事の内容は、純粋な CSS を使用してマテリアル デザインの水滴アニメーション ボタンのエフェクトを実現するための JS 実装方法に関するものです。必要な方は参考にしていただければ幸いです。 。

前回の記事では、純粋なCSSを使用して水滴の拡散アニメーションを実装しましたが、いくつかの欠陥があります。これについては記事の最後でも説明します。ページが読み込まれるときに、ボタン上の水滴のアニメーションが 1 回だけ移動します。次に、クリックしたときにマウスの位置に応じて広がりません。

以下の基本的なコードはすべて前の記事からのものです

マテリアルデザインの水滴アニメーションボタン効果を実現する純粋なcss js実装方法

css は固定点スプレッドのみ可能です

避けられない js

本当に CSS で目的の効果を実現したいのですが、結局のところ、これは UI インタラクションに属するため、js を関与させないようにしますが、体力が足りず、マウスの位置取得などの機能が全く使えません。

よく考えてみると、やはり js で位置座標を取得することしかできませんが、js のロジックを削減することができます。座標さえわかれば、あとは で実行できます。 css。

実装アイデア

cssの新機能

実は実用CSSの新機能がたくさんあると、これしか実装できなかったCSSもたくさんあります。代わりに、以前の js を使用することもできます。

CSS ネイティブ変数 var は、誰もが一度は触れたことがあるはずです。おそらく互換性の問題が原因で、それを使用することをためらっていて、単に互換性のためにそれを使用しないでください

マテリアルデザインの水滴アニメーションボタン効果を実現する純粋なcss js実装方法

実際には、

IE## を考慮しない限り、# の場合でも互換性は可能です。たとえ IE を考慮する必要がある場合でも、ボタンが損なわれていないことを確認できます。これは、いわゆる グレースフル ダウングレード とも呼ばれます。##var の使用法は非常に簡単です。

:root {
    --main-bg-color: red;
}
.container {
    width: 20px;
    height: 20px;
    background-color: var(--main-bg-color);/**background-color:red**/
}
ログイン後にコピー
var の詳細な使用法については、次のとおりです。 Baidu は自分で行うことができます。

オールマイティ js

js を使用します。目的は 1 つだけです。それはマウス クリックの位置を取得することです。これは非常に単純です。イベント オブジェクトのイベントには offsetX と offsetY があり、これは親要素に対する相対的なマウスの位置を記述するために使用されます。 実際、この属性は初期には IE 専用でした。Google と Firefox は使いやすいと感じましたが、上記のバージョンでもサポートされているかどうかは知りません。したがって、互換性は大きな問題ではありません~

var x = event.offsetX;
var y = event.offsetY;
ログイン後にコピー
マテリアルデザインの水滴アニメーションボタン効果を実現する純粋なcss js実装方法具体的な実装

クリックされたときに左側を取得し、それを保存する必要があります。 css 変数

サンプル コード

function ripple(ev){
  var x = ev.offsetX;
  var y = ev.offsetY;
  this.style.setProperty('--x',x+'px');
  this.style.setProperty('--y',y+'px');
}
ログイン後にコピー
マテリアルデザインの水滴アニメーションボタン効果を実現する純粋なcss js実装方法はい、ほんの少しの js

対応する CSS 部分では、位置を変更するために保存した変数を取得する必要があります中心点の 

.btn>span:after{ 
  content: ''; 
  position: absolute; 
  background: transparent; 
  border-radius:50%; 
  width: 100%; 
  padding-top: 100%; 
  margin-left: -50%; 
  margin-top: -50%; 
  left: var(--x,-100%); 
  top: var(--y,-100%); 
}
ログイン後にコピー
ここで 2 つの問題が解決されました。

は初めて入力するときに 1 回トリガーされます。

: ここでは

left# を指定しました。 ## デフォルト値は

-100 %

left: var(--x,-100%);
ログイン後にコピー

つまり、前の

--x

に値がない場合、または不正な場合は、次の値が採用されます。 ,

-100%

は、水滴アニメーションのプロセスが目に見えないところでトリガーされ、ページ上にまったく表示されなくなります。 #拡散はマウスのクリック位置に従います: マウスの位置が取得できたので、マウスがクリックされた場所から拡散する問題を簡単に認識できます #完全なデモ

<label class="btn" tabindex="1">
<input type="checkbox"><span onclick="ripple(this,event)">button</span>
</label>
ログイン後にコピー
.btn{
 display: block; 
 width: 300px; 
 margin: 50px; 
 outline: 0; 
 overflow: hidden;  
 position: relative; 
 transition: .3s; 
 cursor: pointer; 
 user-select: none; 
 height: 100px; 
 text-align: center; 
 line-height: 100px; 
 font-size: 50px; 
 background: tomato; 
 color: #fff;  
 border-radius: 
 10px;
 }
.btn>span{
 position: absolute; 
 left: 0; top: 0; 
 width: 100%; 
 height: 100%;
 }
.btn>span:after{
 content: &#39;&#39;; 
 position: absolute; 
 background: transparent; 
 border-radius:50%; 
 width: 100%; 
 padding-top: 100%; 
 margin-left: -50%; 
 margin-top: -50%; 
 left: var(--x,-100%); 
 top: var(--y,-100%); 
 }
.btn:active{
 background: orangered;
 }
.btn>input[type=checkbox]{display: none}
.btn>input[type=checkbox]+span:after{animation: ripple-in 1s;}
.btn>input[type=checkbox]:checked+span:after{animation: ripple-out 1s;}
@keyframes ripple-in{
    from {
        transform: scale(0);
        background: rgba(0,0,0,.25)
    }
    to {
        transform: scale(1.5);
        background: transparent
    }
}
@keyframes ripple-out{
    from {
        transform: scale(0);
        background: rgba(0,0,0,.25)
    }
    to {
        transform: scale(1.5);
        background: transparent
    }
}
ログイン後にコピー
function ripple(dom,ev){
  console.log(ev)
  var x = ev.offsetX;
  var y = ev.offsetY;
  dom.style.setProperty(&#39;--x&#39;,x+&#39;px&#39;);
  dom.style.setProperty(&#39;--y&#39;,y+&#39;px&#39;);
}
ログイン後にコピー

セクション実際、jsの実装は非常に簡単ですが、cssが難しいのですが、cssはjsよりもはるかに柔軟です。積み木を例にとると、積み木はさまざまなパーツが固定されており、その種類は限られていますが、それらを組み合わせてさまざまなおもちゃを作ることはできます。運転するには、機能的なドライバーであるモーターモジュールを使用する必要があります。実際、ビルディングブロックの開発プロセスは最も労働集約的な部分であり、変更されていない唯一の部分は電力システムです。

以上がマテリアルデザインの水滴アニメーションボタン効果を実現する純粋なcss js実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css css3 javascript
ソース：segmentfault.com
前の記事：CSSセレクターとは何ですか? CSSセレクターとは何ですか? 次の記事：CSS と Vanilla.js を使用して Apple デバイスを表示するインタラクティブなアニメーションを実装する方法 (ソース コードを添付)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート