class的流光效果

效果图:

代码示例

复制代码
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			/* 流光效果 */
			.light {
				position: absolute;
				display: block;
			}

			.light:nth-child(1) {
				filter: hue-rotate(0deg);
				top: 0;
				left: 0;
				width: 100%;
				height: 3px;
				background: linear-gradient(90deg, transparent, #3a86ff);
				animation: animate1 8s linear infinite;
			}

			@keyframes animate1 {
				0% {
					left: -100%;
				}

				50%,
				100% {
					left: 100%;
				}
			}

			.light:nth-child(2) {
				filter: hue-rotate(60deg);
				top: -100%;
				right: 0;
				width: 3px;
				height: 100%;
				background: linear-gradient(180deg, transparent, #3a86ff);
				animation: animate2 8s linear infinite;
				animation-delay: 2s;
			}

			@keyframes animate2 {
				0% {
					top: -100%;
				}

				50%,
				100% {
					top: 100%;
				}
			}

			.light:nth-child(3) {
				filter: hue-rotate(120deg);
				bottom: 0;
				right: 0;
				width: 100%;
				background: linear-gradient(270deg, transparent, #3a86ff);
				animation: animate3 8s linear infinite;
				animation-delay: 4s;
			}

			@keyframes animate3 {
				0% {
					right: -100%;
					height: 3px;
				}

				50%,
				100% {
					height: 2px;
					right: 100%;
				}
			}

			.light:nth-child(4) {
				filter: hue-rotate(300deg);
				bottom: -100%;
				left: 0;
				width: 3px;
				height: 100%;
				background: linear-gradient(360deg, transparent, #3a86ff);
				animation: animate4 8s linear infinite;
				animation-delay: 6s;
			}

			@keyframes animate4 {
				0% {
					bottom: -100%;
				}

				50%,
				100% {
					bottom: 100%;
				}
			}

			.boxs {
				width: 100%;
				display: flex;
				justify-content: center;
				overflow: hidden;
			}

			.box {
				width: 300px;
				height: 300px;
				background-color: antiquewhite;
				text-align: center;

			}

			.box {
				position: relative;
				/* 让伪元素相对于.box定位 */
				overflow: hidden;
				/* 隐藏超出.box的部分 */
			}
		</style>
	</head>
	<body>

		<div class="boxs">
			
			<div class="box">
				<span class="light"></span><span class="light"></span><span class="light"></span><span class="light"></span>
				<p>流光效果</p>
			</div>
		</div>
	</body>
</html>

希望可以帮到大家

相关推荐
Liudef062 小时前
2048小游戏实现
javascript·css·css3
小桥风满袖5 小时前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Hilaku6 小时前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
ac.char7 小时前
Golang读取ZIP压缩包并显示Gin静态html网站
golang·html·gin
每天开心7 小时前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
撰卢8 小时前
如何提高网站加载速度速度
前端·javascript·css·html
sophister8 小时前
Flex 布局中容易踩的那些坑,你踩过几个?
前端·css·html
MiyueFE8 小时前
CSS 函数与混入草案:原生 CSS 的“魔法”即将登场!
前端·css
呆呆的心12 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
WildBlue12 小时前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html