CSS 边框也能动画？小施魔法~

边框动画

为边框加上动画效果，往往会让交互显得更加友好。

边框通常设置属性 border/box-shadow/outline，通过它们即可以实现不同的边框效果。

先来看一种基础的边框动画：【码上掘金】

code.juejin.cn/pen/7163822…

主要是设置 outline 和 outline-offset 属性，hover 之后赋不同值，实现简单。

再看另一种边款环绕的效果动画：

code.juejin.cn/pen/7163831…

来源：# Fantastic CSS border animation Coco 大佬 tql

接下来我们来拆解一下这个动画效果的实现：

Step1

首先用 conic-gradient 设置矩形的背景为渐变色，并用 border: 0.5rem dotted lime 设置虚线边框。

code.juejin.cn/pen/7163843…

注意，这里还用 background-origin: border-box 调整了背景起始位置；

Step2

将 border 和 padding 进行层次区分，利用 background-clip 属性。

对比设置 3 种 clip 效果：

1. background-clip:border-box,border-box
2. background-clip:padding-box,border-box
3. background-clip:content-box,border-box

code.juejin.cn/pen/7163848…

明显，第 2 种符合预期。

Step3

最后一步添加 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 --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

code.juejin.cn/pen/7163851…

如果想去掉中间的渐变内容，只留下边框动画，设置：

/* 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
;

code.juejin.cn/pen/7163851…

小结

本篇核心是更加深刻地认识 3 个 CSS 属性：

1. conic-gradient 2. background-origin 3. background-clip

其中，background-origin 和 background-clip 的区别注意区分

二者都是 css3 中引入的两个跟元素背景相关的属性，它们有相同的可选值，即 border、padding、content三种，而且这两个属性表示的都是元素背景与元素边框、补白 (padding) 和内容区域之间的某种关系。

background-origin 定义的是背景位置的起始点；而 background-clip 是对背景（图片和背景色）的切割~