纯CSS3鼠标滑过溜光按钮

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

（就是它）

随用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让溜光自己动。