<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{800px;height:600px;overflow:hidden;} /* div宽度和高度 超出隐藏 */ div a:hover::before{transition: all 0.5s;left:850px;} /* css3过度样式 before离左边850像素 */ div a:before{content: ""; position: absolute; 50px; height: 600px; top: 0; left: -130px; 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);} /* 这里是给反光加样式的css3代码，就不一一解释了 */ </style> </head> <body> <div><a href="javascript:;"><img src="img/1.jpg"></a></div> </body> </html>
