css 环绕动画

<div  class="item">
            <div class="items"></div>
</div>

// 转动的边框线(两条)
.item {
  --bRadius: 10px;
  .items {
    position: relative;
    transition: all 0.3s;
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 16px;
      left: 16px;
      right: 16px;
      bottom: 3px;
      border: 2px solid #ff0000;
      transition: all 1.5s;
      border-radius: var(--bRadius);
      -webkit-animation: clippath 8s infinite linear;
      animation: clippath 8s infinite linear;
    }
    &::after {
      animation: clippath 8s infinite -4s linear;
    }
    @keyframes clippath {
      0%,
      100% {
        clip-path: inset(0 0 98% 0);
      }
      25% {
        clip-path: inset(0 98% 0 0);
      }
      50% {
        clip-path: inset(98% 0 0 0);
      }
      75% {
        clip-path: inset(0 0 0 98%);
      }
    }
  }
}