class的流光效果

最新推荐文章于 2024-07-25 14:15:14 发布

天香自然，地上红豆

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量380

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/tianxianghuiwei/article/details/139844862

版权

效果图：

代码示例


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

希望可以帮到大家