CSS旋转边框
这个旋转边框的效果主要通过CSS中的动画、位置和伪元素技术实现。下面我将逐步分析和解释每个关键部分的功能和作用：
1. HTML 结构
<div class="button">旋转边框</div>
- 这里定义了一个
div元素，类名为button，这是按钮的主体。内容为“旋转边框”，这是按钮显示的文本。
2. CSS 样式和动画
a. 基本样式设置
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #1f1f1f;
}
body元素使用Flexbox布局，使内容水平和垂直居中。height: 100vh表示视口高度的100%，使得整个页面填满整个浏览器窗口。background-color: #1f1f1f设置了一个深灰色的背景。
b. 按钮的样式
.button {
padding: 30px 60px;
font-size: 16px;
color: #fff;
border: none;
border-radius: 10px;
position: relative;
overflow: hidden;
}
- 按钮具有内部填充、字体大小、白色文字和无边框。
border-radius: 10px为按钮添加圆角。position: relative是为了设置伪元素的定位基准。overflow: hidden确保任何超出按钮边界的内容（如动画）都不会显示。
c. 内层背景
.button::before {
content: '';
position: absolute;
z-index: -1;
width: calc(100% - 4px);
height: calc(100% - 4px);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 10px;
background: #1f1f1f;
}
::before伪元素创建了一个稍小于按钮的内层，这是为了形成一个边框效果。- 使用
calc(100% - 4px)稍微减少宽度和高度，使其比按钮小，从而外部的边框能够显示出来。 transform: translate(-50%, -50%)结合left和top的50%，使得伪元素居中于按钮。
d. 旋转边框效果
.button::after {
content: '';
position: absolute;
z-index: -2;
width: 100%;
height: 200%;
top: 50%;
left: 50%;
transform-origin: top left;
background-color: aqua;
animation: rotate 2s linear infinite;
}
::after伪元素用于创建旋转边框。- 设置
width: 100%和height: 200%是为了制造出边框的形状和大小。 transform-origin: top left设置旋转的原点在顶部左侧，结合高度的200%，产生的效果是边框在垂直方向上伸展并围绕中心旋转。background-color: aqua为边框设置颜色。animation: rotate 2s linear infinite定义了旋转动画，持续时间2秒，以线性方式无限重复。
总结
这个旋转边框效果通过CSS的::before和::after伪元素创建了两层结构，内层是一个稍小的背景块，外层是一个延伸并持续旋转的边框。动画利用@keyframes定义了从0度旋转到360度的动画，形成一个连续循环的旋转效果。