<!DOCTYPE html>
<html lang=
"en">
<head>
<meta charset=
"UTF-8">
<title>Document</title>
<style>
div{width: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;
width: 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>
转载于:https://www.cnblogs.com/Afanty/p/7052765.html
