shadow 探究 - 环状动画

Hover

设置初始颜色

先设置四个角的颜色（设置宽高. 圆角. 0边框的代码省略）：

<div class='shadow'>Hover</div>

--color: #1e91e9;

/* 用四个阴影模拟四个象限，这里只设置一个，其实初始效果是一样的 */
box-shadow: 0 0 0 2px var(--color), 0 0 0 2px var(--color),
  0 0 0 2px var(--color), 0 0 0 2px var(--color);

设置浮动动画


.shadow:hover {
  --color: #1e91e9;
  animation: border .5s ease forwards;
}

@keyframes border {
  /* 1/4 时，右上角：向右偏移为0，向上偏移125，不模糊，扩散2px，变为灰色 */
  /* 左上角：向右偏移为0，向上偏移125，不模糊，扩散2px，变为灰色 */
  25% {
    box-shadow: 0 -125px 0 2px var(--color),
                -60px -60px 0 2px var(--color),
                -60px 60px 0 2px var(--color),
                60px 60px 0 2px var(--color),
                0 0 0 2px #ccc;
  }

  50% {
    box-shadow: 0 -125px 0 2px var(--color),
                -125px 0px 0 2px var(--color),
                -60px 60px 0 2px var(--color),
                60px 60px 0 2px var(--color),
                0 0 0 2px #ccc;
  }

  75% {
    box-shadow: 0 -125px 0 2px var(--color),
                -125px 0px 0 2px var(--color),
                0px 125px 0 2px var(--color),
                60px 60px 0 2px var(--color),
                0 0 0 2px #ccc;
  }

  100% {
    box-shadow: 0 -125px 0 2px var(--color),
                -125px 0px 0 2px var(--color),
                0px 125px 0 2px var(--color),
                120px 40px 0 2px var(--color),
                0 0 0 2px #ccc;
  }
}