css实现白光划过效果

该效果可以通过“过度”，“动画”实现。本文会介绍这两种不同的实现方式

html部分

		<div class="box">
			<div class="light">
				
			</div>
		</div>

创建一个box,包裹一个light

css部分

			*{
				padding: 0;
				margin: 0;
			}
			html{
				display: flex;
				justify-content: center;
			}
			.box{
				position: relative;
				margin-top: 30px;
				width: 300px;
				height: 200px;
				background-color: green;
				overflow: hidden;
			}
			.light{
				content: '';
				display: block;
				position: absolute;
				top: -20%;
				left: -100%;
				width: 350px;
				height: 100px;
				transform: rotate(-45deg);
				background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
				/* 过度实现部分 */
				/* transition: 0.8s; */
			}
			.box:hover .light{
				/* 过度实现部分 */
				/* transform: translate(200%,200%) rotate(-45deg); */
				animation: cross 0.5s;
			}
			@keyframes cross{
				from{

				}
				to{
					
					top: 80%;
					left: 100%;
					transform: rotate(-45deg);v
				}
			}

想要通过过度效果实现的同学，将动画效果注释掉，释放过度部分的注释就可以了。

实现原理

将ligth盒子设置为宽350px,高100px的长方形，通过添加渐变实现光影效果，再将其逆时针旋转45度定位于box盒子的左上方，然后通过“动画”或者“过度”效果使其向右下方移动。（动画效果在鼠标离开box的时候，会有一个光影返回去的效果。）

纯属分享个人学习经验，如果有更好的实现方法或者代码有错误的地方，欢迎各位大佬指正。