css 上滑波纹效果
导读:CSS上滑波纹效果是一种常见的网页设计效果之一,可以通过CSS来实现。具体实现方式如下:.button{position: relative;overflow: hidden;background-color: #333;color: #f...
CSS上滑波纹效果是一种常见的网页设计效果之一,可以通过CSS来实现。具体实现方式如下:
.button{ position: relative; overflow: hidden; background-color: #333; color: #fff; border: none; padding: 10px 20px; font-size: 16px; text-transform: uppercase; letter-spacing: 2px; } .button:hover::before{ content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 0; height: 0; background: rgba(255,255,255,0.2); border-radius: 50%; opacity: 0.3; transition: all .8s ease-in-out; } .button:hover::after{ content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; background: rgba(255,255,255,0.2); border-radius: 50%; opacity: 0.3; transition: all .8s ease-in-out; } .button:hover::before,.button:hover::after{ animation: wave 2s linear infinite; } @keyframes wave{ 0%{ transform: scale(1); opacity: 0.3; } 50%{ transform: scale(2.5); opacity: 0; } 100%{ transform: scale(5); opacity: 0; } }
通过以上代码,我们可以先给按钮设置样式,然后在按钮的:hover伪类中添加:before和:after伪类,分别实现两个圆形元素,当鼠标悬停在按钮上时,这两个圆形元素会像波纹一样扩散开来,在不断缩小中循环播放,从而实现了CSS上滑波纹效果。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: css 上滑波纹效果
本文地址: https://pptw.com/jishu/314180.html