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

lxf2023-03-15 16:29:01

首页 > 经验
> 正文

边框动画

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

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

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

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

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

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

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

Step1

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

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

Step2

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

对比设置 3 种 clip 效果：

background-clip:border-box,border-box
background-clip:padding-box,border-box
background-clip:content-box,border-box

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

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

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