CSS3------ 按钮闪光划过效果

制作这个效果之前，我们得了解transform,transition,linear-gradient这些属性的用法。

定义与用法

transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。在这个效果里面主要用到了旋转rotate。

transition 属性设置元素当过渡效果,transition有四个属性，在这个效果中运用到了transition-duration。

transition-property 指定CSS属性的name，transition效果

transition-duration transition效果需要指定多少秒或毫秒才能完成

transition-timing-function 指定transition效果的转速曲线

transition-delay 定义transition效果开始的时候

linear-gradient() 函数用于创建一个线性渐变的 "图像"。

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。

1.先写一个按钮

.box{width: 200px;margin: 200px auto;height: 50px;background:url("kybd-190524-b01.png") no-repeat center;cursor: pointer;border-radius: 10px;position: relative;overflow: hidden;}

2.给box设置伪元素，你也可以在box的div中在写一个div元素，运用好position属性就行。

.box:before{content: '';width: 300px;height: 100px;background: linear-gradient(transparent 10%,rgba(255,255,255,0.4),transparent 90%);transform: rotate(-45deg);position: absolute;top: -40px;left: -208px;transition: .5s ;}

3.利用left给box添加hover效果

.box:hover:before{left:500px;}

注：在步骤2中看不懂的，可以把box的overflow先去掉，将before中的background先设置为较为明显的颜色，如background：#000；此时看见的before相当于一个方块悬在box的左上角，hover时before方块从左移到右的过程。