2025年纯CSS3鼠标滑过溜光按钮

科技前沿 • 2025-04-08 13:55 • 阅读 37

大家好，我是讯享网，很高兴认识大家。

最近支付宝的抢“五福”活动很火。在支付宝首页中，有个“点击进入”的按钮，一直在溜光，挺好看的。

讯享网

（就是它）

随用CSS3写了一个。

主要用到的知识要点：

1、溜光用的是标签的伪类

2、溜光部分绝对定位，标签相对定位

3、溜光部分的背景用了CSS3的渐变。这里是“白色透明--白色--白色透明”的方式

ps：写渐变背景在我看来是非常麻烦的事情，还在有个网站不错，可以随便调整颜色，自动生成渐变代码。

http://www.internetke.com/jsEffects//

话不多说，贴代码来了：

<button type="button" class="btn">点击参与五福活动</button>

讯享网

HTML代码比较简单，这个按钮可以用A标签做，也可以直接用button，但是不能用input，因为input作为单标签，是没有:before或:after伪标签的。

讯享网 button:focus{ outline: none; } .btn{ border:1px #f63 solid; background: #cc2b0f; color: #fff; width: 200px; height: 40px; line-height: 38px; font-size: 16px; cursor: pointer; border-radius: 10px; position: relative; overflow: hidden; } .btn::before{ width: 80px; height: 120px; position: absolute; content: ""; transform: rotateZ(30deg); top:-50px; left:-80px; background: linear-gradient(left , rgba(255, 255, 255, 0) , rgba(255, 255, 255, 0.5) 48% , rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(left , rgba(255, 255, 255, 0) , rgba(255, 255, 255, 0.5) 48% , rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(left , rgba(255, 255, 255, 0) , rgba(255, 255, 255, 0.5) 48% , rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(left , rgba(255, 255, 255, 0) , rgba(255, 255, 255, 0.5) 48% , rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(left , rgba(255, 255, 255, 0) , rgba(255, 255, 255, 0.5) 48% , rgba(255, 255, 255, 0) 100%); } .btn:hover::before{ left:240px; transition:all 1s; }

代码相对简单，就不解释了。完工~

这个效果也可以结合animation和@keyframes让溜光自己动。

2025年纯CSS3鼠标滑过溜光按钮

相关推荐