最近支付宝的抢“五福”活动很火。在支付宝首页中,有个“点击进入”的按钮,一直在溜光,挺好看的。
(就是它)
随用CSS3写了一个。
主要用到的知识要点:
1、溜光用的是标签的伪类
2、溜光部分绝对定位,标签相对定位
3、溜光部分的背景用了CSS3的渐变。这里是“白色透明--白色--白色透明”的方式
ps:写渐变背景在我看来是非常麻烦的事情,还在有个网站不错,可以随便调整颜色,自动生成渐变代码。
http://www.internetke.com/jsEffects/2014120803/
话不多说,贴代码来了:
<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让溜光自己动。