纯CSS3流光边框特效

发布时间：2023-05-30 15:30

实现原理：
div的before元素当成左边框
内部一个class=bottom的i标签当下边框
div的after元素当成右边框
内部一个class=top的i标签当上边框

效果图：
$\"请添加图片描述\"$
原理图：

$\"请添加图片描述\"$

左边框：
$\"在这里插入图片描述\"$

<!DOCTYPE html>

<html lang="zh">

<head>

	<meta charset="UTF-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>纯CSS3流光边框特效</title>

	<style>
		.fly_border {

			border: 1px solid rgba(32, 254, 255, 0.3);
			/* 宽高和相对定位是一定要给的,因为这会影响.animate-border子元素的定位 */
			position: relative;
			width: 400px;
			height: 300px;
			overflow: hidden;
			margin: 200px auto;
		}

		.fly_border::before {
			content: " ";
			position: absolute;
			width: 1px;			
			height: 100%;
			top: -100%;
    		left: 0;
			background-image: linear-gradient(
				0deg,
				transparent,
				#03e9f4,
				transparent
			);
			animation: two 4s linear infinite;
		}

		.fly_border::after {
			content: " ";
			position: absolute;
			width: 1px;			
			height: 100%;
			bottom: -100%;
    		right: 0;
			background-image: linear-gradient(
				360deg,
				transparent,
				#03e9f4,
				transparent
			);
			animation: four 4s linear 2s infinite;
		}
		
		.fly_border i {
			position: absolute;
			display: inline-block;
			height: 1px;
			width: 100%;
		}

		.fly_border .bottom {
			bottom: 0;
    		left: -100%;
			background-image: linear-gradient(
				270deg,
				transparent,
				#03e9f4,
				transparent
			);
			animation: one 4s linear 1s infinite;
		}

		.fly_border .top {
			top: 0;
    		right: -100%;
			background-image: linear-gradient(
				270deg,
				transparent,
				#03e9f4,
				transparent
			);
			animation: three 4s linear 3s infinite;
		}

		body {
			height: 100%;
			background-color: #0f222b;
		}


		@keyframes one {
			0% {
				left: -100%;
			}
			50%,
			100% {
				left: 100%;
			}
		}
		
		@keyframes two {
			0% {
				top: -100%;
			}
			50%,
			100% {
				top: 100%;
			}
		}
		
		@keyframes three {
			0% {
				right: -100%;
			}
			50%,
			100% {
				right: 100%;
			}
		}
		
		@keyframes four {
			0% {
				bottom: -100%;
			}
			50%,
			100% {
				bottom: 100%;
			}
		}

		</style>

</head>

<body>

	<div>

		<div class="fly_border"><i class="top"></i><i class="bottom"></i></div>

	</div>

</body>

</html>

参考资料：
青青子衿~~ vue 实现边框流光动画

纯CSS3流光边框特效

相关推荐