Mar
30
2024
css实现hover划过（滑过）图片闪光（亮光一闪而过）效果
作者：
绝缘体.. 发布：
2024-03-30 08:58 分类：
未分类 阅读：
抢沙发
css实现hover划过（滑过）图片闪光（亮光一闪而过）效果，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>css实现滑过图片闪光效果</title>
<style>
.item{
width:100px;
height:100px;
background: #f00;
position:relative;
}
.item::before{
content:'';
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
background:linear-gradient(-45deg,transparent 30%,transparent,rgba(255,255,255,.5),transparent 70%) no-repeat;
background-size:200% 200%;
background-position:200% 200%;
}
.item:hover::before{
transition:background-position 1s;
background-position:-100% -100%;
}
</style>
</head>
<body>
<div class="item">
</div>
</body>
</html>
微信扫一扫，打赏作者吧～
css实现hover划过（滑过）图片闪光（亮光一闪而过）效果：等您坐沙发呢！
发表评论
