纯CSS3 Android样式按钮点击波特效
程序员文章站
2022-05-30 11:41:34
...
简要教程
css-ripple-effect是一款使用纯CSS3制作的炫酷扁平风格按钮点击波特效。该效果是仿照Android系统的Material design风格点击波来制作的。
使用方法
在页面中引入ripple.css文件。
<link href="ripple.css" rel="stylesheet">
HTML结构
要为一个<button>元素制作点击波特效,只需要为它添加ripple class类即可。
<button type="button" class="ripple" >Primary</button>
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)!