css边框动画效果

1.效果

image
2. 代码：

<template>
  <div class="tab-card"></div>
</template>
<style lang="scss" scoped>
.tab-card {
  position: relative;
  padding: 10px 30px;
  margin: 10px 0;
  background-color: rgb(2, 29, 65, 0.3);
  box-shadow: 0 0 50px rgb(13, 53, 95) inset;
  border-radius: 13px;
  box-sizing: border-box;

  width: 585px;
  height: 501px;
  --tabWidth: 585px;
  --tabHeight: 501px;
  --animationDelay: -1s;

  &::after {
    content: '';
    box-shadow: inset 0 0 1px 2px rgba(159, 230, 184, 0.7);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    animation: clipMe 4s linear infinite var(--animationDelay);
    border-radius: 13px;
  }

  @keyframes clipMe {
    0% {
      clip: rect(1px, calc(var(--tabWidth) - 3px), 0px, 0px);
    }

    10% {
      clip: rect(1px, calc(var(--tabWidth) / 2 - 3px), calc(var(--tabHeight) / 2 - 5px), 0px);
    }

    25% {
      clip: rect(2px, 2px, calc(var(--tabHeight) - 5px), 0px);
    }

    50% {
      clip: rect(
        calc(var(--tabHeight) - 3px),
        calc(var(--tabWidth) - 3px),
        calc(var(--tabHeight) + 2px),
        0
      );
    }

    75% {
      clip: rect(
        0,
        calc(var(--tabWidth) + 2px),
        calc(var(--tabHeight) + 2px),
        calc(var(--tabWidth) - 2px)
      );
    }

    100% {
      clip: rect(1px, calc(var(--tabWidth) - 3px), 0px, 0px);
    }
  }

  &::before {
    animation-delay: -4s;
  }
}
</style>

3.原理
使用css的clip属性裁剪显示的边框位置，只对absolute或fixed定位的元素有效。

4.参考
CSS实现动态边框