css制作动态按钮

小董大咖 · 收录于 2023-09-24 03:58:18 · source URL

效果如下

他是会动的，我不知道如何上传视频（是个新人） 

代码如下

 <!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>Document</title>
</head>
<style>
	.div{
		width: 100px;
		height: 50px;
		color: #0ebeff;
		font-size: 24px;
		background: #000;
		border: none;
		outline: none;
		z-index: 1;
		border-radius: 10px;
		/* outline: 4px solid #fff; */
		position: relative;
		overflow: hidden;
	}
	.div::before{
		content: '';
		position: absolute;
		background: #f40;
		width: 200%;
		height: 200%;
		z-index: -2;
		left: 50%;
		top: 50%;
		transform-origin: 0 0;
		animation: rotate 3s infinite linear;
	}
	.div::after {
		content: '';
		position: absolute;
		background: #008c8c;
		width: calc(100% - 4px);
		height: calc(100% - 4px);
		left: 2px;
		top: 2px;
		border-radius: 10px;
		z-index: -1;
	}
	@keyframes rotate{
		to{
			transform: rotate(1turn);
		}
	}
</style>
<body>
	<div class="div">边框按钮</div>
</body>
</html>