html5 css3鼠标滑过效果,纯CSS3鼠标滑过按钮流光效果

这是一款效果非常炫酷的纯CSS3鼠标滑过按钮流光效果。当用户用鼠标滑过按钮的时候，一道流光会瞬间滑过按钮，就像玻璃的反光效果，非常漂亮。

使用方法

HTML结构

该效果中的按钮是一个超链接元素。

Link

CSS样式

将超链接元素制作为块级元素或内联块级元素，为它设置相对定位方式。并为按钮设置一个宽度和高度，背景颜色和前景颜色。为了让流光在按钮之外看不见，必须设置一个overflow:hidden;属性。最后为按钮的过渡动画设置0.15秒的ease-in效果。

.button {

display: block;

position: relative;

background: #00B16A;

color: #fff;

width: 160px;

height: 50px;

line-height: 50px;

text-align: center;

font-family: 'Ubuntu', sans-serif;

font-size: 15px;

font-weight: bold;

text-decoration: none;

margin: 50px auto 0;

border-radius: 2px;

overflow: hidden;

-webkit-transition: all 0.15s ease-in;

transition: all 0.15s ease-in;

}

流光使用按钮的:before伪元素来制作，它使用绝对定位，它是一个白色的矩形，开始时位于按钮之外，由于按钮设置了overflow:hidden;属性，所以开始时它是不可见的。然后通过skewX()函数将它倾斜25度，并设置0.25秒的ease-out过渡动画效果。

.button:before {

content: ' ';

position: absolute;

background: #fff;

width: 25px;

height: 50px;

top: 0;

left: -45px;

opacity: 0.3;

-webkit-transition: all 0.25s ease-out;

transition: all 0.25s ease-out;

-webkit-transform: skewX(-25deg);

transform: skewX(-25deg);

}

在鼠标滑过按钮时，按钮的背景颜色发生变化。同时修改:before伪元素的宽度和left属性，使流光滑过按钮。

.button:hover {

background: #26C281;

}

.button:hover:before {

width: 45px;

left: 205px;

}