点击元素或按钮出现炫酷波纹

ripple
.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, blue 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; } button{ height:30px; }

 

你可能感兴趣的:(前端)