基本的css实现图片上白光划过效果

大前端 2023年1月13日 37

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

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


关注微信公众号『PHP学习网

第一时间了解最新网络动态
关注博主不迷路~

PHP学习网:站内收集的部分资源来源于网络,若侵犯了您的合法权益,请联系我们删除!
分享到:
赞(0)

文章评论

您需要之后才可以评论
0点赞 0评论 收藏 QQ分享 微博分享

PHP学习网

PHP学习网