我们在开发网站时，一般会在图片上加一个过光效果，目的是为了，让用户明白我的鼠标移动到这里了，同时还能增加网页上的美观效果。下面是它的实现基础代码，大家可以看看了解了解。

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