The content of this article is about how to use pure CSS to realize the water drop animation effect of buttons in Material Design. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

You should often see this kind of special effect, it’s very cool, isn’t it

This is the most common in Google Material Design special effects, there are many ready-made js libraries on the market to simulate this special effect. But it is often necessary to introduce a lot of js and css. In fact, in existing projects, you may just want to add such a button to enhance the user experience. These js libraries seem a bit too large. At the same time, because they are implemented in js, many Also pay attention to loading issues.

So, is there a way to use css to achieve this special effect?

Idea

In fact, it is an animation, a perfect circle grows from small to large, using css3# The animation in ## is easy to implement

Sample code

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

js is used to implement it in a very simple way, which is to add A class, and then remove the class

Sample code

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

The pseudo-classes that interact with the mouse in css mainly include

• hovermouse After

• ##:active

  Mouse press

• :focus

  Mouse focus

• :checked

  Mouse selected

In many cases, the effects on our pages are achieved through

To achieve this, putting the mouse on it will trigger an effect and leave the animation. However, if you put the mouse on it and leave immediately, the animation will end immediately. Let’s try it first.

Structure

This is the page structure and style we have written

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

It is very simple, it is an ordinary button style

Next we add the perfect circle we need in the button.

We use pseudo elements to achieve this

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

We remove the overflow: hidden above and shrink the circle a little to see the effect

Then, we write a zoom animation

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

hover small interactive experience

Try passing the mouse?

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

The effect is good, but if the mouse leaves too fast, the newly expanded circle will shrink back immediately, which is a bit inconsistent

But this is not the effect we want. What we want is to click once to trigger once, instead of just putting it on and it will never trigger again.

active try

In daily work,

is also used more often, usually for the click effect, so let’s try it? <pre class="brush:php;toolbar:false">.btn:active:after{ ??animation:?ripple?1s; }</pre>

The effect is also unsatisfactory, a bit similar to

, you must keep pressing the mouse to complete the Trigger, for example, in the above example, the running implementation of the animation is 1s, then you must click on that button and continue 1s to see the complete animation effect, otherwise, it is like the above As soon as the mouse leaves, the animation retracts immediately focus experience

If you need to focus any element, you can specify a

attribute <pre class="brush:php;toolbar:false">&lt;a&gt;button&lt;/a&gt;</pre> <pre class="brush:php;toolbar:false">.btn:focus:after{ ??animation:?ripple?1s; }</pre>

can also be triggered, but after it is triggered, it can only be triggered again after losing focus. The actual operation performance is, click over After one time, is there no other way to click on the outer space?

Of course there are still some, the last one is definitely the solution, haha

checked

cannot be triggered directly, it is a form element Triggered after selection. To do this, we need to transform the page structure <pre class="brush:php;toolbar:false">&lt;label&gt; ??&lt;input&gt;&lt;span&gt;button&lt;/span&gt; &lt;/label&gt;</pre> We changed it to

and included the input[type=checkbox] tag , mainly to trigger the input selection when the button is clicked. Add a little style

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

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

其實可以用:not來實現(xiàn)

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

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

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

無限輪回中...

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

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

這個應該很好理解吧。

那么，重點來了，現(xiàn)在把動畫ripple1和ripple2里面的動畫過程都改成一樣，也是可以分別觸發(fā)的，也就是說，只要動畫名稱不一樣，css都會當成不同的動畫來處理

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

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

一些不足

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

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

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

The above is the detailed content of How to use pure css to achieve the water drop animation effect of buttons in Material Design. For more information, please follow other related articles on the PHP Chinese website!