CSS实现边框旋转

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度的动画，形成一个连续循环的旋转效果。