鼠标移到图片上，光线闪过效果的实现

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

第一种：使用::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%;    	/*结束水平位置*/
	}