使用纯css怎么实现材料设计中按钮的水滴动画效果 - 行业资讯

　　介绍

这篇文章给大家分享的是有关使用纯css怎么实现材料设计中按钮的水滴动画效果的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

大家平时应该经常见到这种特效,很炫酷不是吗

这是谷歌材料设计中最常见的特效了,市面上也有很多现成的js库,用来模拟这一特效。但是往往要引入一大堆js和css,其实在已有的项目中,可能只是想加一个这样的按钮,来增强用户体验,这些js库就显得有些过于庞大了,同时由于是js实现,很多时候还要注意加载问题。

那么,有没有办法用css来实现这一特效呢

思路

其实就是一个动画,一个正圆从小变大,用<代码> css3>

示例代码

@keyframes涟漪{ 　　从{ 　　变换:规模(0); 　　透明度:1; 　　} 　　, { 　　变换:规模(1); 　　透明度:0; 　　} 　　}

通常用<代码> js代码来实现的方式很简单,就是给点击元素添加一个<代码>类>

示例代码

的var btn=. getelementbyid (& # 39; btn # 39;); 　　btn.addeventlistener(& # 39;点击# 39;,函数(){ 　　addClass (btn & # 39;动画# 39;) 　　},假) 　　btn.addeventlistener (& # 39; transitionend& # 39;,函数(){//监听css3动画结束　　removeClass (btn & # 39;动画# 39;) 　　},false)

那么如何通过css来实现动画的触发呢?

css实现

<代码> css代码中与鼠标交互的伪类主要有

<李>

<代码> 徘徊鼠标经过

<李>

<代码>:活跃的鼠标按下

<李>

<代码>:焦点鼠标聚焦

<李>

<代码>:检查鼠标选中

很多情况下,我们页面中的效果都是通过<代码> 徘徊来实现的,鼠标放上去触发一个效果,离开还原,但是如果放上去马上离开,那么动画也会马上结束。

我们先试一下。

结构

这是我们写好的页面结构和样式

& lt; style> 　　.btn { 　　显示:块; 　　宽度:300 px; 　　大纲:0; 　　溢出:隐藏; 　　位置:相对; 　　过渡:3; 　　光标:指针; 　　用户选择:没有; 　　身高:100 px; 　　text-align:中心; 　　行高:100 px; 　　字体大小:50 px; 　　背景:番茄; 　　颜色:# fff; 　　border - radius: 10 px; 　　} 　　& lt;/style> 　　& lt;一个类=癰tn"祝辞button

很简单,就是一个普通的按钮样式

下面我们在按钮中添加我们需要的正圆。

我们用伪元素来实现

.btn:{后　　内容:& # 39;& # 39;; 　　位置:绝对的; 　　宽度:100%; 　　padding-top: 100%; 　　背景:透明; 　　这个特性:50%; 　　左:50%; 　　上图:50%; 　　变换:翻译(-50%,-50%) 　　}

我们把上面的溢出:去隐藏掉,把这个圆缩小一点看看效果

然后,我们写个缩放的动画

@keyframes涟漪{ 　　从{ 　　变换:翻译(-50%、-50%)范围(0);/* *由于我们默认写了变换属性,所以这里要补上翻译(-50%,-50%),不然就会被替换了* */背景:rgba (0, 0, 0, .25); 　　} 　　, { 　　变换:翻译(-50%、-50%)规模(1); 　　背景:透明; 　　} 　　}