这是一款效果非常炫酷的纯CSS3鼠标滑过按钮流光效果。当用户用鼠标滑过按钮的时候,一道流光会瞬间滑过按钮,就像玻璃的反光效果,非常漂亮。
使用方法
HTML结构
该效果中的按钮是一个超链接<a>
元素。
<a class="button" href="#">Link</a>
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; }