精彩的 CSS 边框动画

2025-05-24

精彩的 CSS 边框动画

今天我访问了博客网站 -  shoptalkshow，看到这样的风格很有趣：

我认为它的风格很独特，尤其是一些边框。

所以，在本文中我们将利用CSS来制作各种奇妙的边框效果。

CSS Border 属性

说到边框，首先想到的是border，最常用的是solid，上图出现的dased是dased。

除了最常见的实线、虚线外，CSS 边框还支持无、隐藏、点线、双线、凹槽、脊线、插入和突出等样式。移除none，hidden查看所有原生支持的边框样式：

这些是基础的。如果要实现其他样式的边框，或者给边框添加动画，则需要配合一些其他属性，或者开动脑筋。好了，我们来看看其他一些有趣的边框。

边框长度变化

让我们从一个简单的开始，实现这样的边框效果：

这其实就是两个借用元素的伪元素。只需要分别设置两个伪元素的上下左右边框，hover传递的时候就可以改变两个伪元素的高度和宽度。非常容易理解。



div {
    position: relative;
    border: 1px solid #03A9F3;

    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
    }

    &::before {
        top: -5px;
        left: -5px;
        border-top: 1px solid var(--borderColor);
        border-left: 1px solid var(--borderColor);
    }

    &::after {
        right: -5px;
        bottom: -5px;
        border-bottom: 1px solid var(--borderColor);
        border-right: 1px solid var(--borderColor);
    }

    &:hover::before,
    &:hover::after {
        width: calc(100% + 9px);
        height: calc(100% + 9px);
    }
}
Enter fullscreen mode Exit fullscreen mode

CodePen 演示——宽度边框动画

接下来就要开始加深难度了。

虚线边框动画

使用 dashed 关键字，您可以轻松创建虚线边框。




div {
    border: 1px dashed #333;
}
Enter fullscreen mode Exit fullscreen mode

当然，我们的目的是让边框移动。没有办法使用dashed关键字 。但是在 CSS 中有很多方法可以实现虚线。例如，渐变就是一种不错的方法：



div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}
Enter fullscreen mode Exit fullscreen mode

看一下，使用渐变模拟的虚线如下：

嗯，渐变支持多种渐变。我们可以使用渐变来表示容器的四个边：



div {
    background: 
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}
Enter fullscreen mode Exit fullscreen mode

效果如下：

好的，至此，我们的虚线边框动画实际上已经完成了很大一部分。虽然border-style: dashed它不支持动画，但渐变支持。让我们hover为上面的 div 添加一个效果，并在元素的改变animation时添加动画。hoverbackground-position



div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}
Enter fullscreen mode Exit fullscreen mode

OK，看看效果，鼠标悬停的时候，边框是可以动的，因为整个动画是首尾相连的，无限循环的动画看起来就像一个虚线边框一直在运动，这个算是一个小眼罩或者说一个小技巧吧：

这里还有一个技巧，如果我们想让虚线边框从其他边框过渡到虚线边框，然后再为线条添加动画效果。如果想节省一些代码，使用 会更快border，像这样：



div {
    border: 1px solid #333;

    &:hover {
        border: none;
        background: 
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
        background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
    }
}
Enter fullscreen mode Exit fullscreen mode

由于盒子模型上border和background的位置不同，会出现明显的视觉错位：

为了解决这个问题，我们可以border用代替outline，因为outline可以设置outline-offset。这样就完美地解决了问题。



div {
    outline: 1px solid #333;
    outline-offset: -1px;

    &:hover {
        outline: none;
    }
}
Enter fullscreen mode Exit fullscreen mode

最后看一下应用到实际按钮上的效果：

上述Demo的完整代码如下：

CodePen 演示——虚线边框动画

渐变的其他酷炫用途

使用渐变，可以实现的不仅仅是上述效果。

我们继续深入研究渐变，利用渐变来实现这样的背景：



div {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-repeat: no-repeat;
        background-size: 50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
    }
}
Enter fullscreen mode Exit fullscreen mode

200%注意这里使用的是元素的伪元素生成的图形，并且宽高与父元素的宽高一致overflow: hidden。

接下来，添加旋转：



div {
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}
Enter fullscreen mode Exit fullscreen mode

看一下效果：

最后用伪元素遮住中间，好看的边框动画就出来了（动画中会出现半透明元素，方便理解原理）：

上述Demo的完整代码如下。我第一次看到这个效果是在这个作者——Jesse B的

CodePen 演示——渐变边框动画

更改渐变的颜色

掌握了上面的基本技巧之后，我们可以对渐变的颜色做一些调整，我们将4种颜色变成1种颜色：



div::after {
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: 0 0;
    background-image: linear-gradient(#399953, #399953);
}
Enter fullscreen mode Exit fullscreen mode

得到如下图表：

再次让其一起旋转，单色追逐边框动画就出来了：

CodePen 演示 -- 渐变边框动画 2

哇，看起来真漂亮。不过，如果是单线的话，有一个明显的缺陷，那就是边框末端是小三角形，而不是垂直的，这在某些场景下可能不适用，或者产品经理无法接受。

有什么方法可以去除这些小三角形吗？是的，下面我们将介绍另一种利用clip-path和消除这些小三角形的方法。

巧妙使用圆锥梯度

在介绍之前clip-path我们先来了解一下角度渐变。

上面主要用到了 linear-gradient 。 我们可以用 angular-gradient 来实现完全一样的效果conic-gradient。

让我们尝试使用conic-gradient来实现同样的效果，这次使用更深的样式。核心代码如下。



.conic {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
        animation: rotate 4s linear infinite;
    }
}
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}
Enter fullscreen mode Exit fullscreen mode

效果图和示意图如下。旋转一个带有部分角度渐变的图形，并用另一个伪元素遮盖中间部分，这样就只漏出了线条部分：

CodePen 演示 -- 旋转边框 3

巧妙使用 clip-path

又是老朋友了clip-path，有趣的事情永远不会缺席。

clip-path可以对坐标点本身进行动画处理，从一个剪辑形状转换为另一个剪辑形状。

利用这个特性，我们可以巧妙地实现这样的边框跟随效果。伪代码如下：



div {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid gold;
        animation: clippath 3s infinite linear;
    }
}

@keyframes clippath {
    0%,
    100% {
        clip-path: inset(0 0 95% 0);
    }
    25% {
        clip-path: inset(0 95% 0 0);
    }
    50% {
        clip-path: inset(95% 0 0 0);
    }
    75% {
        clip-path: inset(0 0 0 95%);
    }
}
Enter fullscreen mode Exit fullscreen mode

效果图及示意图：

CodePen - 剪辑路径边框动画

这里因为元素会被裁剪，所以借用伪元素作为背景进行裁剪和动画就足够了，使用 的好处是clip-path，裁剪出的边框不会产生小三角形。而且，这种方法支持圆角border-radius。

如果我们也使用另一个伪元素，来真正实现按钮样式，我们就能得到这样的效果。

CodePen - clip-path 边框动画 2

巧妙使用溢出

以下技巧是利用溢出实现的。实现这样的边框动画：

为什么说overflow实现了呢？

看一下：

CodePen Demo -- 巧用溢出及变换实现线条悬停效果

两个核心点。

  1. 我们用它overflow: hidden来隐藏原本位于容器之外的整个元素
  2. 我们用来transform-origin控制元素的旋转中心

您是否注意到几乎所有有趣的 CSS 效果都使用了类似的技术？

*简单来说，我们看到的动画只是原始现象的一小部分，通过特定的裁剪、透明度变化、蒙版等，让我们最终看到的只是原始现象的一部分。 *

巧妙使用 border-image

有了，我们还可以实现一些有趣的边框动画。关于border-image 的正确使用，border-image已经有一篇非常好的文章，所以本文就不再赘述其基本定义。border-image

如果我们有这样的图表：

border-image-slice您可以使用和的功能border-image-repeat来获得类似的边框图案。



div {
  width: 200px;
  height: 120px;
  border: 24px solid;
  border-image: url(image-url);
  border-image-slice: 32;
  border-image-repeat: round;
}
Enter fullscreen mode Exit fullscreen mode

在此基础上，可以随意改变元素的高度和宽度，从而扩展到容器边框的任意大小：

CodePen 演示 -- border-image 演示

然后，在这篇文章——如何使用边框图像为 SVG 制作动画中，它还解释了一种使用方法border- image，非常酷。

与上面的例子不同，我们只需要让我们的图案移动，也就是说我们需要一个像这样的背景图像。

然后，我们同样可以得到移动的边框图，代码一模一样，只不过边框是移动的：

CodePen 演示——舞动骷髅边框

边框图像 && 渐变

border-image还可以直接填充颜色或渐变，此外还可以发布对的引用url。

我们可以使用border-image++filter来clip-path实现带有渐变变换的圆角边框。



.border-image-clip-path {
    width: 200px;
    height: 100px;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0px round 10px);
    animation: huerotate 6s infinite linear;
    filter: hue-rotate(360deg);
}

@keyframes huerotate {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}
Enter fullscreen mode Exit fullscreen mode

CodePen Demo——clip-path、border-image 和 filter 实现圆角渐变边框

最后

更多精彩的CSS技术文章汇总在我的Github——iCSS。

也许你会喜欢我的CodePen，它有大量令人惊叹的 CSS 效果。

好了，这就是本文的全部内容，希望它对您有所帮助。:)

文章来源：https://dev.to/chokcoco/fantastic-css-border-animation-5166
Devto 翻译
PREV
对 git 感到困惑？这里有一个 git 速成课程来解决这个问题 🎉 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.
NEXT
初学者的架构模式：MVC、MVP 和 MVVM