Loading... 今天写小程序用户中心按钮突然感觉很low,然后就有了下面的操作,使用css实现按钮点击波纹效果 ``` <view class="card"> ... </view> ``` ``` .card{ //防止溢出 overflow: hidden; } ``` ``` .card:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; //设置径向渐变 background-image: radial-gradient(circle, #666 10%, transparent 10.01%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform .3s, opacity .5s; } ``` ``` .card:active:after { transform: scale(0, 0); opacity: .3; //设置初始状态 transition: 0s; } ``` ![按钮点击波纹效果](http://blog.11dz.cn/usr/uploads/2021/03/1502811135.gif) 最后修改:2021 年 03 月 17 日 © 允许规范转载 打赏 赞赏作者 微信 赞 0 如果觉得我的文章对你有用,请随意赞赏