<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.img {
display: block;
position: relative;
width: 800px;
height: 450px;
margin: 0 auto;
}
.img:before {
content: "";
position: absolute;
width: 100px;
height: 120%;
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)
}
.img:hover:before {
left: 150%;
transition: left 2s ease 0s;
}
</style>
</head>
<body>
<a href="#" class="img"><img
src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1508071812303&di=39df35e061f362e6cd1e1f432b6af0d9&imgtype=0&src=http%3A%2F%2Fwww.pp3.cn%2Fuploads%2F201505%2F2015062602.jpg" width="800">
</a>
</body>
</html>
