有的网站会为按钮添加点击波纹效果提升网站效果,我们可以简单实现一下:
主要借助::after伪类及CSS3中的transform和transition属性:
html:
<div class="container text-center"> <button class="btn btn-default ripple btn-lg">Button</button> <button class="btn btn-default ripple btn-lg">Button with very long content</button> </div>
.ripple { position: relative; //隐藏溢出的径向渐变背景 overflow: hidden; } .ripple: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; } .ripple:active:after { transform: scale(0, 0); opacity: .3; //设置初始状态 transition: 0s; }
效果:
发表评论 取消回复