CSS 边框动画

了解在 CSS 中为边框添加动画效果的几种方式

Bramus

设置边框

您可以通过以下几种方法为元素设置边框：border、outline 和 box-shadow。如 Stephanie Eckles 的添加元素边框的 3 种 CSS 方法中所述，每种方法都有自己的优缺点，尤其是在制作边框动画方面。不使用正确的 CSS border 的主要原因是出于动画目的。

使用 outline-offset 制作边框动画，作者：Kevin J.鲍威尔

最近有一篇文章引起了我的注意，这篇文章是超棒的 CSS 边框动画，作者 Coco 探索了更多选项。通过使用 ::before 和 ::after 注入生成的内容，它们可以创建人造边框，然后为其添加动画效果。

对我来说，最棒的是文章中使用的动画可视化效果。它们确实有助于阐明具体是怎样做来达到预期效果的。

使用 Coco 生成的内容制作边框动画

白色图层和彩色线条都是生成的内容。通过使白色图层淡入和淡出，可以清楚地展示它们的堆叠方式以及动画的工作方式。

保留盒模型

使用“生成内容”来模仿边框的缺点是最终会得到损坏的箱形模型：现在，内容可能会遮挡伪边框，因为所谓的“边框”会显示在下方。如需缓解措施，您必须将所需的 border-width 作为 padding 应用。

要拥有真实的边框，从而保持框模型的效果，您可以使用多个背景，然后将其延伸到边框区域。

基础知识

首先，我们创建一个虚线边框并添加多个背景。

/* Size of the border */
--border-size: 0.5rem;

/* Create a dotted border */
border: var(--border-size) dotted lime;

/* Create two background layers:
   1. A white semi-transparent
   2. A layer with the colored boxes
 */
background-image:
  linear-gradient(to right, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)),

  conic-gradient(
    from 45deg,
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  )
;

使用 background-origin 调整背景大小

如您所见，此处的背景有些有趣的情况：它们被绘制到边框，但 conic-gradient 似乎全部不对。这实际上是预期行为：默认情况下，背景图片不会绘制到边框，因为其来源是元素的 padding-box。毕竟，为了创建边框，设置的背景图片会在边框本身中重复，从而产生奇怪的视觉效果。

要解决此问题，您需要拉伸背景，使其也占据边框的大小。您可以通过拉伸和重新定位背景来手动执行此操作，但最好是使用 background-origin 属性根据 border-box 调整背景的大小。

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 1 次
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 4
• <ph type="x-smartling-placeholder"></ph> 3 次

来源

错误做法

/* Manually add or offset the size of the border where needed */
background-position: calc(var(--border-size) * -1) calc(var(--border-size) * -1);
background-size: calc(var(--border-size) * 2 + 100%) calc(var(--border-size) * 2 + 100%);

正确做法

background-origin: border-box;

添加这一项后，所有内容看起来都好多了：

使用 background-clip 缩小白色背景层

由于背景现在占据了所有空间，因此需要再次缩小半透明层。您可以采用更简单的方法，而不必再次摆弄 background-size：使用 background-clip 并将其设置为 padding-box。这样，背景将不再绘制在边框区域下方。

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 1 次
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 4
• <ph type="x-smartling-placeholder"></ph> 5 次

来源

background-clip:
  padding-box, /* Clip white semi-transparent to the padding-box */
  border-box /* Clip colored boxes to the border-box (default) */
;

最后，将边框设为 transparent，以获得完整效果。

border: 0.3rem dotted transparent;

动画

如需恢复边框的动画效果，您可以操纵 conic-gradient 的起始角度。

--angle: 0deg;
conic-gradient(
  from var(--angle),
  #d53e33 0deg 90deg,
  #fbb300 90deg 180deg,
  #377af5 180deg 270deg,
  #399953 270deg 360deg
);

多亏了 @property，在支持它的浏览器中可以轻而易举地实现这一功能：

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 85
• <ph type="x-smartling-placeholder"></ph> 85
• <ph type="x-smartling-placeholder"></ph> 128
• <ph type="x-smartling-placeholder"></ph> 16.4

来源

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

总而言之，代码将变为：

奖励内容：border-image

上文已介绍的一种绘制渐变边框的方法是使用 CSS border-image。

浏览器支持

• <ph type="x-smartling-placeholder"></ph> 16
• <ph type="x-smartling-placeholder"></ph> 12
• <ph type="x-smartling-placeholder"></ph> 15
• <ph type="x-smartling-placeholder"></ph> 6

来源

它允许简化代码，因为您无需处理重叠的背景。可以像以前一样应用动画。

/* Create a border */
border: 0.5rem solid transparent;

/* Paint an image in the border */
border-image:
  conic-gradient(
    from var(--angle),
    #d53e33 0deg 90deg,
    #fbb300 90deg 180deg,
    #377af5 180deg 270deg,
    #399953 270deg 360deg
  ) 1
;

但是，您会发现，有以下几点不再适用于此方法：

• border-image 没有遵循 border-radius；它将始终是矩形
• 将 border-image-slice 设置为填充时，border-image 不会在已设置的 background 下方绘制，而是绘制在顶部。如果您希望背景是半透明的，这样做可能会很麻烦。

总结

在 CSS 中，为边框添加动画效果的可能性不尽相同。您可以根据使用场景选择使用其中一种。