Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Wassertropfen-Animationseffekt von Schaltfl?chen im Material Design zu realisieren. Ich hoffe, dass er für Sie hilfreich ist .

Diese Art von Spezialeffekt sollte man oft sehen, es ist sehr cool, nicht wahr?

Das ist das Beste In Google Material Design übliche Spezialeffekte, es gibt viele vorgefertigte JS-Bibliotheken auf dem Markt, um diesen Spezialeffekt zu simulieren. Es ist jedoch h?ufig erforderlich, viele JS- und CSS-Bibliotheken einzuführen. In bestehenden Projekten m?chten Sie m?glicherweise nur eine solche Schaltfl?che hinzufügen, um die Benutzererfahrung zu verbessern. Da sie in js implementiert sind, achten viele auch auf Ladeprobleme.

Gibt es also eine M?glichkeit, CSS zu verwenden, um diesen besonderen Effekt zu erzielen?

Die Idee

ist eigentlich eine Animation, die von klein nach gro? w?chst . Die Verwendung von css3 Animation ist einfach zu implementieren

Beispielcode

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

Normalerweise ist die Verwendung von js zur Implementierung sehr einfach, das hei?t, fügen Sie a hinzu class zum angeklickten Element und animieren Sie es dann. Entfernen Sie nach Abschluss den class

Beispielcode

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)

Wie l?st man also eine Animation über CSS aus?

Zu den Pseudoklassen, die in der CSS-Implementierung von

css mit der Maus interagieren, geh?ren haupts?chlich

• hoverwenn die Maus vorbeigeht

• :activeMaus nach unten

• :focusMausfokus

• :checkedMaus ausgew?hlt

In vielen F?llen werden die Effekte auf unseren Seiten durch hover erreicht, um einen Effekt auszul?sen, und wenn Sie die Maus darauf setzen drauf und sofort gehen, die Animation wird sofort beendet.

Lass es uns zuerst versuchen.

Struktur

Dies ist die Seitenstruktur und der Stil, die wir geschrieben haben

<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>

Es ist sehr einfach, es ist ein gew?hnlicher Schaltfl?chenstil

Als n?chstes fügen wir den perfekten Kreis, den wir brauchen, in die Schaltfl?che ein.

Wir verwenden Pseudoelemente, um

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

Wir entfernen den oben versteckten überlauf, verkleinern den Kreis ein wenig und sehen den Effekt

Dann schreiben wir eine Zoom-Animation

@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;
????}
}

schweben Sie über ein kleines interaktives Erlebnis

Versuchen Sie es mit der Maus?

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

Der Effekt ist immer noch gut, aber wenn die Maus zu schnell geht, schrumpft der neu erweiterte Kreis sofort wieder, was etwas inkonsistent ist

Aber das ist nicht der Effekt, den wir wollen. Was wir wollen, ist, einmal zu klicken, um einmal auszul?sen, anstatt es einfach anzulegen und es wird nie wieder ausgel?st.

Aktives Ausprobieren

In der t?glichen Arbeit wird active h?ufig verwendet, normalerweise wegen des Klickeffekts, also probieren wir es mal aus?

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

Der Effekt ist auch unbefriedigend, ein bisschen ?hnlich der Bedeutung von Maus gedrückt halten, man muss gedrückt halten Klicken Sie zum Ausl?sen mit der Maus beispielsweise auf 1s im obigen Beispiel. Klicken Sie dann auf die Schaltfl?che und fahren Sie mit 1s fort, um den vollst?ndigen Animationseffekt zu sehen Oben wird die Animation sofort verkleinert.

Fokuserlebnis

Wenn Sie ein Element fokussieren müssen, k?nnen Sie ein tabindexAttribut

<a>button</a>

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

kann auch ausgel?st werden, aber nach dem Ausl?sen kann es erst wieder ausgel?st werden, wenn der Fokus verloren geht. Die tats?chliche Betriebsleistung besteht darin, dass nach einem Klick auf die leere Stelle drau?en geklickt wird foucs

kann nicht direkt ausgel?st werden, es wird nach dem Formularelement ausgel?st ist ausgew?hlt. Dazu müssen wir die Seitenstruktur checked

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

ersetzt und das lable-Tag eingefügt, haupts?chlich um die input[type=checkbox]-Auswahl auszul?sen, wenn die Schaltfl?che aktiviert ist geklickt. input

.btn>span:after{
??/**換一下選擇器**/
}
.btn>input[type=checkbox]{
??display:?none
}
.btn>input[type=checkbox]:checked+span:after{
??animation:?ripple?1s;
}

這樣也能觸發(fā)動(dòng)畫，但問(wèn)題是，當(dāng)再次點(diǎn)擊的時(shí)候就成了非選中狀態(tài)了，怎么觸發(fā)動(dòng)畫呢？

其實(shí)可以用:not來(lái)實(shí)現(xiàn)

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

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

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

無(wú)限輪回中...

這個(gè)問(wèn)題困擾了我好久，不過(guò)皇天不負(fù)有心人，后來(lái)試著在兩種狀態(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)來(lái)了，現(xiàn)在把動(dòng)畫ripple1和ripple2里面的動(dòng)畫過(guò)程都改成一樣，也是可以分別觸發(fā)的，也就是說(shuō)，只要?jiǎng)赢嬅Q不一樣，css都會(huì)當(dāng)成不同的動(dòng)畫來(lái)處理

這樣就簡(jiǎn)單了，我們只需要默認(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ā)，所以頁(yè)面加載進(jìn)來(lái)就會(huì)看到按鈕上的水滴動(dòng)畫運(yùn)動(dòng)一次，不過(guò)也不是特別明顯，還可以接受。

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

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

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS den Wassertropfen-Animationseffekt von Schaltfl?chen im Material Design. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!