在图片上扫光的css实现
在一个500*500的图片下，直接扫光的css实现
<!DOCTYPE html>
<html>
<head>
<meta charSet="UTF-8"/>
<title>扫光DEMO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
position: relative;
float: left;
margin: 18px 0 0 5px;
overflow: hidden;
transition-duration: 5s; /**动画时间**/
}
.container:before {
content: "";
position: absolute;
width: 1000px;
height: 80px; /**光标的宽度，可根据实际调整**/
background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .5), transparent);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: searchLights 1s ease-in 1s infinite;
-o-animation: searchLights 1s ease-in 1s infinite;
animation: searchLights 1s ease-in 1s infinite; /**第一个数字参数控制扫光速度，数字越大越慢**/
}
@keyframes searchLights {
0% {
left: -200px;
top: -300px;
}
100% {
left: -160px;
top: 1000px;
}
}
</style>
</head>
<body>
<div>
<p>扫光效果1</p>
<div class="container">
<h1 class="txt">
<a href="">
<img src="sg.png">
</a>
</h1>
</div>
<p>扫光效果2</p>
<div class="container">
<h1 class="txt">
<a href="">
<img src="sg.png">
</a>
</h1>
</div>
<p>扫光效果3</p>
<div class="container">
<h1 class="txt">
<a href="">
<img src="sg.png">
</a>
</h1>
</div>
</div>
</body>
</html>
