淘先锋技术网

首页 1 2 3 4 5 6 7

HTML+css----流动边框效果

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.container{
			width: 300px;
			height: 150px;
			border: 1px solid #ccc;
			text-align: center;
			line-height: 150px;
			font-size: 35px;
			font-weight: bold;
			position: relative;
			overflow: hidden;
		}
		.container div{
			position: absolute;
			background: hotpink;
		}
		.left{
			width: 100%;
			height: 4px;
			left: -100%;
			top: 0;
			animation: left 1s linear infinite;
		}
		@keyframes left{
			0%{
				left: -100%;
			}
			50%,100%{
				left: 100%;
			}
		}
		.top{
			width: 4px;
			height: 100%;
			right: 0;
			top: -100%;
			animation: top 1s linear infinite 0.25s;
		}
		@keyframes top{
			0%{
				top: -100%;
			}
			50%,100%{
				top: 100%;
			}
		}
		.right{
			width: 100%;
			height: 4px;
			right: -100%;
			bottom: 0;
			animation: right 1s linear infinite 0.5s;
		}
		@keyframes right{
			0%{
				right: -100%;
			}
			50%,100%{
				right: 100%;
			}
		}
		.bottom{
			width: 4px;
			height: 100%;
			left: 0;
			bottom: -100%;
			animation: bottom 1s linear infinite 0.75s;
		}
		@keyframes bottom{
			0%{
				bottom: -100%;
			}
			50%,100%{
				bottom: 100%;
			}
		}
	</style>
	<body>
		<div class="container">
			<span>点击抽奖</span>
			<div class="left"></div>
			<div class="right"></div>
			<div class="top"></div>
			<div class="bottom"></div>
		</div>
	</body>
</html>