本文用两种方式实现了鼠标移动到图片上时，有光线闪过的效果。

第一种：使用::before伪元素实现。

1.html代码部分

<div class='container'><div class="item"><a href="#"><div><img src="./img/dizi.jpg" /></div></a></div><div class="item"><a href="#"><div><img src="./img/yishu.jpg" /></div></a></div><div class="item"><a href="#"><div><img src="./img/laikang.jpg" /></div></a></div>
</div>

2.css代码部分

实现思路：
使用伪元素::before在item的前面放置一个盒子，内容为空，设置盒子的宽度高度，初始位置在.item的左侧，结束位置在.item的右侧，光线效果使用linear-gradient线性渐变，并让盒子绕x轴倾斜-25deg
当鼠标移到.item图片上时,这个光线盒子从左边移动到右边

			.container {width: 1000px;margin: 20px auto;height: 200px;display: flex;justify-content: space-between;}.container .item {position: relative;width: 300px;overflow: hidden;}.container .item img {width: 100%;height: 200px;}.container .item::before {content: '';position: absolute;width: 200px;height: 100%;top: 0;left: -150%;   /*初始水平位置，光线用渐变效果生成*/background-image: linear-gradient(rgba(255, 255, 255, 0) 0,rgba(255, 255, 255, 0.2) 50%,rgba(255, 255, 255, 0) 100%);transform: skewX(-25deg);}.item:hover::before {left: 150%;	/*结束处的水平位置*/transition: all .5s ease 0s;  /*过渡效果*/}

第二种：额外添加标记<i></i>实现

1.html代码部分

增加<i></i>标记

	<div class="item"><a href="#"><div><img src="./img/laikang.jpg" /></div></a><i class="light"></i></div>

2.css代码部分

实现思路：和第一种基本一样，区别是这里用的hsla颜色值，第一种用的是rgba颜色值

	.item {position: relative;width: 300px;height: 200px;overflow: hidden;}.item img {width: 100%;height: 100%;}.item .light {cursor: pointer;position: absolute;left: -150%;   	/*初始水平位置*/top: 0;width: 100%;height: 100%;background-image: linear-gradient(0deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .5), hsla(0, 0%, 100%, 0));transform: skewX(-25deg); /*绕X轴倾斜-25度*/}.item:hover .light {transition: all .5s ease;  /*过渡效果*/left: 150%;    	/*结束水平位置*/}