『前端必修课』按钮边框的旋转动画

原创

程序员NEO

修改于 2024-11-26 21:22:56

6700

推荐文章	简介	链接
借助AI助手如何高效排查SQL问题	这篇文章提供了非常实用的SQL问题排查技巧，通过结合AI助手的使用，大大提升了开发效率。	查看文章

一、前言

🐤本篇文章是『前端必修课』系列文章的第 3 篇，主要介绍属性读取方式

像很多 CSS 的效果吧，它需要的不是知识，而是 想象力。

就比如说本章要给大家介绍的旋转按钮，它该咋做呢？最终效果如下：

这个时候大家可以自己想一想该如何实现，这个非常的需要想象力，如果没有想象力，是做不出来的。

二、搭建基本环境

首先用你自己的开发工具，新建好 index.html，与 index.css：

index.html 内容如下我提供给大家：

<!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, maximum-scale=1.0, user-scalable=0">
    <title>按钮边框的旋转动画</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<button>边框按钮</button>
</body>
</html>

非常的检查就是放了一个按钮，引入了 CSS 文件。

index.css：

/* 全局样式 */
body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    font-family: Arial, sans-serif;
}

/* 按钮样式 */
button {
    position: relative;
    display: inline-block;
    border: none;
    background: transparent;
    color: #30b8ce;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    height: 50px;
    width: 120px;
    cursor: pointer;
    z-index: 1;
    outline: 1px solid #fff;
}

/* 按钮悬停效果 */
button:hover {
    color: #fff;
}

CSS 文件内容，大致就是设置了全局样式，给默认的 Button 设置了样式美化了一下，为了让大家看的更加的清楚我给按钮添加了外边框也就是 outline: 1px solid #fff 这行样式，你把我给你的代码拷贝到自己开发工具所对应的文件中运行起来你会看到如下图的样式：

关于页面布局我相信大家都会了，不做过多赘述，好，这个时候就可以来正式的讲解下这个效果了。

三、代码实现

然后呢接下来就神奇的事情了，我首先了要给这个按钮加上一个伪元素，before 或者 after 都行，我这里采用 before。

我给这个伪元素设置了绝对定位，那么对应的父元素就得要设置为相对定位，这一点不多说。

button:before {
    content: '';
    position: absolute;
}

将这个 before 伪元素宽度设置为150%，高度设置为150%，为了让大家看得更加清楚，我给它设置一个背景颜色，这个时候我们保存一下再浏览器看一下效果先，背景颜色我采用添加渐变用于增强美感。

button:before {
    content: '';
    position: absolute;
    /* 调整尺寸，使动画更协调 */
    width: 150%;
    height: 150%;
    /* 添加渐变增强美感 */
    background: linear-gradient(90deg, #f40, #ffba00);
}

发现覆盖关系不正确，我设置一下 z-index 为 -2：

button:before {
+   z-index: -2;
}

有的人看到这里可能会问我了 Neo 你这是在干啥呀？不着急，我这个玩意不写到一定程度的话，你是看不出来的，然后接下来呢，我要调整一下这个位置这里记住父元素一定是相对定位的，然后调整一下这个元素的位置，就是设置一下它的 left 为 50%，top 50%，就是让它的左上角，在整个按钮的中间：

还是不知道我在干啥对吧，好那么接下来呢，我要做的事情就是再去加一个伪元素，利用 after 添加它也是一个绝对定位，不过这个元素呢，我要设置一下它的 inset 也就是上下左右它的间隙呢为1个像素，然后给这个元素设置一个背景颜色，比方说 333：

button:after {
    content: '';
    position: absolute;
    inset: 1px;
    background-color: #333;
}

运行到浏览器查看效果：

你会发现是不是有一个东西盖到按钮上去了是吧。然后在设置一下它的 z-index 为 -1。

button:after {
+   z-index: -1;
}

这个时候看上去就变成了一个三层结构了，最上面是按钮就是文字，然后呢第二层呢是这个灰色的矩形第三层呢是这个渐变的背景，到这里我相信有的人可能已经看出来了如下图：

我截图框选的位置，就是这个边框这个边框就是这样造出来的，我在给它设置一个圆角吧这个圆角继承自父元素：

button:after {
+   border-radius: inherit;
}

这个时候我们的边框就已经造出来了，接下来呢我给这个父元素 button 给它设置一个 overflow hidden：

button {
+   overflow: hidden;
}

边框搞定，好现在做成了这个样子，现在大家应该知道怎么做了吧，是不是就是写个动画转起来就行了。

来个 keyframes rotation to 来个 transform rotate 360 度的动画，然后给 button:before 加上这个动画即可。

/* 动画关键帧 */
@keyframes rotation {
    to {
        transform: rotate(360deg);
    }
}

采用 animation，来个 3 秒，匀速的无穷的运动转。

button:before {
+   animation: rotation 3s linear infinite;
}

运行起来发现转的什么鬼样子：

这个时候我先将 button 的 overflow: hidden; 先去掉你就会发现什么原因导致的了：

button {
-   overflow: visible;
}

好我已经非常清楚了，它目前是上图中这样方式转动的，它能这样转吗肯定是不可以的，我需要它怎么转是不是沿着左上角来转，所我要在设置一个变形原点，就是这个 transform-origin 横向呢 left，纵向呢 top，对吧，左上角来转，现在呢我再将 button 的 overflow: hidden; 加回来再次运行查看效果：

这个时候边框效果就出来了。接下来在做一点事情就非常的简单，先将 outline: 1px solid #fff; 去掉：

button {
-   outline: 1px solid #fff;
}

再将蒙层（button:after）的 333 与背景颜色相同，我这里背景颜色是黑色所以我更改为黑色，这个时候你就只会看到有一个边框在那里转来转去的这个效果就实现了。

四、总结

通过本文的学习，您可以掌握以下知识点：

伪元素的灵活运用：使用 :before 和 :after 实现复杂样式效果，不仅减少 HTML 结构的复杂性，还增强了样式的可维护性。
CSS 动画与关键帧的结合：通过 @keyframes 定义动画的运动轨迹，配合 transform 和 animation 属性，实现旋转边框的效果。
变形原点与定位的巧妙配合：利用 transform-origin 精确控制旋转中心，结合父元素的 relative 定位和伪元素的 absolute 定位，构建动态视觉效果。