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>

希望可以帮到大家

相关阅读:
企业计算机服务器中了faust勒索病毒怎么解密，faust勒索病毒解密流程
基于JAVA医院医护人员排班系统计算机毕业设计源码+系统+mysql数据库+lw文档+部署
环形缓冲区-----适合在通信中接收数据（例如uart）
【ARM Trace32(劳特巴赫) 使用介绍 3 - trace32 访问运行时的内存】
云计算的思想、突破、产业实践
【快速搞定Webpack5】基本配置及开发模式介绍（二）
读像火箭科学家一样思考笔记03_第一性原理（上）
56.【树型结构】
antdv使用a-cascader联级选择器实现自定义浮层样式
noetic 怎么下载robotiq_modbus_tcp 从而使用robotiq二指夹爪

原文地址：https://blog.csdn.net/tianxianghuiwei/article/details/139844862