提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

CSS3 图片扫光/辉光

css3 图片
2023-09-11 14:22:55 时间

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

<!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>

相关文章