使用css制作一个简单的边框流动特效

LanNingHH

已于 2023-07-14 10:08:56 修改

阅读量780

点赞数

文章标签： css 前端 html html5 javascript

于 2023-07-14 09:52:13 首次发布

本文链接：https://blog.csdn.net/qq_52200678/article/details/131716977

版权

该文章展示了一段CSS代码，用于创建一个边框流动的特效。通过使用绝对定位，伪元素，线性渐变背景和CSS关键帧动画，四个角上的边框呈现出循环流动的效果。此效果可用于网页登录界面或其他需要动态视觉元素的设计中。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>边框流动特效</title>
		<style>
			.box {
				margin-left: 500px;
				margin-top: 100px;
				width: 500px;
				height: 500px;
				position: relative;
				overflow: hidden;
			}

			.box-one,
			.box-two {
				position: absolute;
				display: block;
				width: inherit;
				height: inherit;
			}

			.box-one::before,
			.box-one::after,
			.box-two::before,
			.box-two::after {
				content: '';
				position: absolute;
				z-index: 1;
			}

			.box-one::before {
				filter: hue-rotate(0deg);
				top: 0px;
				left: 0;
				width: 100%;
				height: 3px;
				background: linear-gradient(90deg, transparent, #409EFF);
				animation: loginLeft 3s linear infinite;
			}

			.box-one::after {
				filter: hue-rotate(60deg);
				top: -100%;
				right: 0px;
				width: 3px;
				height: 100%;
				background: linear-gradient(180deg, transparent, #409EFF);
				animation: loginTop 3s linear infinite;
				animation-delay: 0.7s;
			}

			.box-two::before {
				filter: hue-rotate(120deg);
				bottom: 0px;
				right: -100%;
				width: 100%;
				height: 3px;
				background: linear-gradient(270deg, transparent, #409EFF);
				animation: loginRight 3s linear infinite;
				animation-delay: 1.4s;
			}

			.box-two::after {
				filter: hue-rotate(300deg);
				bottom: -100%;
				left: 0px;
				width: 3px;
				height: 100%;
				background: linear-gradient(360deg, transparent, #409EFF);
				animation: loginBottom 3s linear infinite;
				animation-delay: 2.1s;
			}

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

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

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

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

			@keyframes loginRight {
				0% {
					right: -100%;
				}

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

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

				50%,
				100% {
					bottom: 100%;
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<span class="box-one"></span>
			<span class="box-two"></span>
			<div class="content" style="margin-top: 200px;margin-left: 160px;">
				在这里输入你的内容
			</div>
		</div>
	</body>
</html>