基本的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的时候，会有一个光影返回去的效果。）