css制作动态按钮

最新推荐文章于 2024-06-07 13:59:56 发布

小董大咖

最新推荐文章于 2024-06-07 13:59:56 发布

阅读量124

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/ddf__/article/details/128508065

版权

该博客展示了如何使用HTML和CSS创建一个动态旋转边框的按钮。代码中通过伪元素`::before`和`::after`，结合关键帧动画`@keyframes rotate`实现了3秒无限循环的旋转效果，使得边框看起来像是在转动。

摘要由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>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>