CSS 边框也能动画？background-origin 和 -clip 来施加魔法~

边框动画

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

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

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

https://code.juejin.cn/pen/7163822571387879435

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

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

https://code.juejin.cn/pen/7163831144369094667

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

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

Step1

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

https://code.juejin.cn/pen/7163843154465488937

注意，这里还用 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

https://code.juejin.cn/pen/7163848289140506665

明显，第 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;
  }
}

https://code.juejin.cn/pen/7163851356564881415

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

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

https://code.juejin.cn/pen/7163851942739836935

小结

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

1. conic-gradient

2. background-origin

3. background-clip

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

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

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

OK，以上便是本篇分享，希望各位工友喜欢~ 欢迎点赞、收藏、评论 🤟

我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我，安东尼陪你一起度过漫长编程岁月 🌏