简要教程
css-ripple-effect是一款使用纯CSS3制作的炫酷扁平风格按钮点击波特效。该效果是仿照Android系统的Material design风格点击波来制作的。
使用方法
在页面中引入ripple.css文件。
HTML结构
要为一个
CSS样式
你可以通过ripple.css文件或ripple.less文件来修改点击波效果的样式。
立即学习“前端免费学习笔记（深入）”；
.ripple {
position: relative;
overflow: hidden;
&:after {
content: "";
background: rgba(255,255,255,0.3);
display: block;
position: absolute;
border-radius: 50%;
padding-top: 240%;
padding-left: 240%;
margin-top: -120%;
margin-left: -120%;
opacity: 0;
transition: all 1s;
}
&:active:after {
padding-top: 0;
padding-left: 0;
margin-top: 0;
margin-left: 0;
opacity: 1;
transition: 0s;
}
}以上就是纯CSS3 Android样式按钮点击波特效的内容，更多相关内容请关注PHP中文网（www.php.cn）！
