CSS实现边框旋转

最新推荐文章于 2024-07-06 23:20:22 发布

宇珩前端踩坑日记

最新推荐文章于 2024-07-06 23:20:22 发布

阅读量1k

点赞数 39

分类专栏： CSS效果分享文章标签： css 前端

本文链接：https://blog.csdn.net/2301_80817413/article/details/139857514

版权

CSS效果分享专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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秒，以线性方式无限重复。