この記事の內(nèi)容は、マテリアル デザインでボタンの水滴アニメーション効果を?qū)g現(xiàn)するための純粋な CSS の使用方法についてです。必要な方は參考にしていただければ幸いです。 。

このような特殊効果はよく見かけますよね、とてもかっこいいですよね

これが最も一般的ですGoogle マテリアル デザインの特殊効果では、この特殊効果をシミュレートする既製の JS ライブラリが市場に多數(shù)存在します。しかし、実際には、既存のプロジェクトでは、ユーザー エクスペリエンスを向上させるためにこのようなボタンを追加する必要がある場合があります。同時(shí)に、これらの JS ライブラリは少し大きすぎるように思えます。これらは js で実裝されているため、読み込みの問題にも注意が必要です。

それでは、CSS を使用してこの特殊効果を?qū)g現(xiàn)する方法はありますか?

アイデア

実際、これはアニメーションであり、完全な円が小さいものから大きいものへと成長します。 css3# を使用 ## のアニメーションは簡単に実裝できます

サンプル コード

@keyframes?ripple{
????from?{
????????transform:?scale(0);
????????opacity:?1;
????}
????to?{
????????transform:?scale(1);
????????opacity:?0;
????}
}

通常は

js を使用して実裝します非常に簡単な方法で、A class を追加し、class

サンプル コード

var?btn?=?document.getElementById('btn');
btn.addeventlistener('click',function(){
??addClass(btn,'animate')
},false)
btn.addeventlistener('transitionend',function(){//監(jiān)聽css3動(dòng)畫結(jié)束
??removeClass(btn,'animate')
},false)

## を削除します。 #それでは、CSS を介してそれを行うにはどうすればよいですか? アニメーションをトリガーするにはどうすればよいですか?

CSS の実裝

css でマウスと対話する疑似クラスには、主に

hover# が含まれます。 ##マウス後

• :active

  マウスプレス

• :focus

  マウス フォーカス

• :checked

  マウスが選択されました

• 多くの場合、ページ上の効果は hover

  によって実現(xiàn)されます。これを?qū)g現(xiàn)するには、マウスを上に置くとエフェクトがトリガーされ、アニメーションが終了します。ただし、マウスを上に置いてすぐに離れると、アニメーションはすぐに終了します。

まずは試してみましょう。

構(gòu)造

これは私たちが書いたページの構(gòu)造とスタイルです

<style>
.btn{ 
  display: block; 
  width: 300px; 
  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;
}
</style>
<a>button</a>

非常にシンプルで、普通のボタンのスタイルです

次に、ボタンに必要な正円を追加します。 これを?qū)g現(xiàn)するために疑似要素を使用します

.btn:after{
????content:?'';
????position:?absolute;
????width:?100%;
????padding-top:?100%;
????background:?transparent;
????border-radius:?50%;
????left:?50%;
????top:?50%;
????transform:?translate(-50%,-50%)
}

オーバーフローを削除します: 上に隠れており、円を少し縮小して効果を確認(rèn)します

次に、ズーム アニメーションを作成します

@keyframes?ripple{
????from?{
????????transform:translate(-50%,-50%)?scale(0);
????????/**由于我們默認(rèn)寫了變換屬性，所以這里要補(bǔ)上translate(-50%,-50%)，不然就會(huì)被替換了**/
????????background:?rgba(0,0,0,.25);
????}
????to?{
????????transform:translate(-50%,-50%)?scale(1);
????????background:?transparent;
????}
}

ホバーの小さなインタラクティブ エクスペリエンス

マウスを渡してみますか?

.btn:hover:after{
??animation:?ripple?1s;
}

効果はまだ良好ですが、マウスがあまりにも早く離れると、新しく拡張された円がすぐに縮小してしまい、少し一貫性がありません。 しかし、これは私たちが望んでいる効果ではありません。私たちが望んでいるのは、単に裝著するだけで再度トリガーされなくなるのではなく、1 回クリックして 1 回トリガーすることです。

active try

日常業(yè)務(wù)では、

active

も、通常はクリック効果のために使用されることが多いので、試してみましょう。

.btn:active:after{
??animation:?ripple?1s;
}

この効果も満足のいくものではなく、マウス ホールド に少し似ています。完了するにはマウスを押し続ける必要があります。たとえば、上記の例では、アニメーションの実行中の実裝は 1s

です。その後、完全なアニメーション効果を確認(rèn)するには、そのボタンをクリックして

1s を続行する必要があります。そうでない場合は、上記のようなものです マウスが離れるとすぐに、アニメーションはすぐに撤回されます フォーカスエクスペリエンス 任意の要素にフォーカスする必要がある場合は、tabindex

屬性を指定できます

<a>button</a>

.btn:focus:after{
??animation:?ripple?1s;
}

foucs もトリガーできますが、トリガーされた後は、フォーカスを失った後にのみ再度トリガーできます。実際の操作パフォーマンスは、一度クリックした後、外側(cè)の空間をクリックする他に方法はありませんか?

もちろんまだいくつかありますが、最後のものが間違いなく解決策です。笑checked

checked

は直接トリガーできません。 form 要素 選択後にトリガーされます。これを行うには、ページ構(gòu)造

<label>
??<input><span>button</span>
</label>

を

lable

に変更し、input[type=checkbox] を含めます。 tag 。主に、ボタンがクリックされたときに

input

の選択をトリガーします。 ちょっとしたスタイルを追加する<pre class="brush:php;toolbar:false">.btn&gt;span:after{ ??/**換一下選擇器**/ } .btn&gt;input[type=checkbox]{ ??display:?none } .btn&gt;input[type=checkbox]:checked+span:after{ ??animation:?ripple?1s; }</pre> <p>這樣也能觸發(fā)動(dòng)畫，但問題是，當(dāng)再次點(diǎn)擊的時(shí)候就成了非選中狀態(tài)了，怎么觸發(fā)動(dòng)畫呢？</p> <p>其實(shí)可以用<code>:not來實(shí)現(xiàn)

.btn>input[type=checkbox]:not(:checked)+span:after{
??animation:?ripple?1s;
}

乍一看好像挺聰明的，仔細(xì)一想，正反兩個(gè)都寫了動(dòng)畫，不就跟:checked沒關(guān)系了？還不如直接

.btn>input[type=checkbox]+span:after{
??animation:?ripple?1s;
}

無限輪回中...

這個(gè)問題困擾了我好久，不過皇天不負(fù)有心人，后來試著在兩種狀態(tài)下觸發(fā)不同的動(dòng)畫是可以分別觸發(fā)的，如下

.btn>input[type=checkbox]:checked+span:after{
??animation:?ripple1?1s;
}
.btn>input[type=checkbox]:not(:checked)+span:after{
??animation:?ripple2?1s;
}

這個(gè)應(yīng)該很好理解吧。

那么，重點(diǎn)來了，現(xiàn)在把動(dòng)畫ripple1和ripple2里面的動(dòng)畫過程都改成一樣，也是可以分別觸發(fā)的，也就是說，只要?jiǎng)赢嬅Q不一樣，css都會(huì)當(dāng)成不同的動(dòng)畫來處理

這樣就簡單了，我們只需要默認(rèn)一個(gè)狀態(tài)，選中一個(gè)狀態(tài)，然后分別觸發(fā)名稱不同的動(dòng)畫就行了~

.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:translate(-50%,-50%)?scale(0);
????????background:?rgba(0,0,0,.25);
????}
????to?{
????????transform:translate(-50%,-50%)?scale(1);
????????background:?transparent;
????}
}
@keyframes?ripple-out{/*僅僅名稱不同*/
????from?{
????????transform:translate(-50%,-50%)?scale(0);
????????background:?rgba(0,0,0,.25);
????}
????to?{
????????transform:translate(-50%,-50%)?scale(1);
????????background:?transparent;
????}
}

效果就如文章一開始所示，完美

完整demo如下

https://codepen.io/xboxyan/pe...

一些不足

由于上述動(dòng)畫樣式在默認(rèn)情況下就會(huì)被觸發(fā)，所以頁面加載進(jìn)來就會(huì)看到按鈕上的水滴動(dòng)畫運(yùn)動(dòng)一次，不過也不是特別明顯，還可以接受。

其次，實(shí)際效果肯定是希望鼠標(biāo)點(diǎn)擊哪里，就以該點(diǎn)為中心擴(kuò)散，我們css肯定是做不到這點(diǎn)的，只能從中心擴(kuò)散，這也只能妥協(xié)了。這里提供一個(gè)思路，可以使用css的變量，每次點(diǎn)擊的時(shí)候吧相應(yīng)的值存在style里面，這樣css中也能用上。

希望能用css今后挖掘出更多有趣的效果^

以上が純粋な CSS を使用してマテリアル デザインでボタンの水滴アニメーション効果を?qū)g現(xiàn)する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。