CSS3 图片扫光/辉光

最新推荐文章于 2025-06-14 13:02:49 发布

福州司马懿

最新推荐文章于 2025-06-14 13:02:49 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： # CSS3 动画文章标签：扫光辉光

转载请注明出处——https://blog.youkuaiyun.com/chy555chy

本文链接：https://blog.youkuaiyun.com/chy555chy/article/details/83656083

CSS3 动画专栏收录该内容

12 篇文章

订阅专栏

在这里插入图片描述
扫光的原理主要是在图片上增加一层，用作扫光，然后添加背景颜色并倾斜一定的角度。动画是左右移动，因此就形成了扫光效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>流光/扫光效果</title>
<style>
:root {
	--stream-effect-width: 25em;
	--stream-effect-height: 10em;
	--stream-mask-width: 25%;
	--stream-mask-skew-deg: 45deg;
	--stream-mask-skew-y: var(--stream-effect-height);
}
.stream-effect {
	width: var(--stream-effect-width);
	height: var(--stream-effect-height);
	position: relative;
	background-size: 100% 100%;
}
.stream-effect::after {
	content: '';
	position: absolute;
	width: var(--stream-mask-width);
	height: 100%;
	background-image: linear-gradient(90deg, #fff5, #fffB, #fff5);
	transform-origin: left top;
	transform: skewx(-45deg);
	transition: left 1s ease;
	left: calc(var(--stream-mask-width) * -1);
}
/* 注意hover的位置（必须挂在实际元素上）！伪元素不是一个实际存在的DOM元素，所以它只有属性没有状态 */
.stream-effect:hover::after{
	left: calc(100% + var(--stream-mask-skew-y))
}
</style>
</head>
<body>
<div class="stream-effect" style="background-image: url(https://via.placeholder.com/400x160)"></div>
<div class="stream-effect" style="background-image: url(https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75)"></div>
</body>
</html>