使用CSS3實現的一個高亮光弧效果，當鼠標hover到某一個元素上時，
一道光弧從左向右閃過，效果如下：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>light</title> <style> body{ margin: 0; } a.floor{ display: block; height: 475px; } a.floor:hover:before{ -webkit-transition: left 1.5s; -moz-transition: left 1.5s; transition: left 1.5s; left: 920px; } a.floor:before{ content: ""; position: absolute; width: 80px; height: 475px; top: 0; left: -150px; overflow: hidden; background: -moz-linear-gradient(left,rgba(255,255,255,0)0, rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%); background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba (255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0))); background: -webkit-linear-gradient(left,rgba(255,255,255,0)0, rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%); background: -o-linear-gradient(left,rgba(255,255,255,0)0, rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%); -webkit-transform: skewX(-25deg); -moz-transform: skewX(-25deg); } </style> </head> <body> <a class="floor" href="javascript:;"> <img src="images/girl.jpg" height="475" width="760" alt=""> </a> </body> </html>
有興趣的朋友可以存下來備用！
【 微信掃一掃 】
