css - 如何剪切一个正方形以便我可以绘制追逐边框？

Question

在我的 React.js 应用程序中，我有一个正方形，我想在其中绘制 2 个在边框周边相互追逐的边框。追逐的边界总是相反的，永远无法追上对方。通过这种方式，我想创建一个如下图所示的霓虹黄色效果。我已经尝试实现这一目标有一段时间了，我已经非常接近了，但我未能正确地追逐边界。它们在广场上移动时似乎会破裂，最后我得到了如下图所示的效果。

Here is the that I have tried so far to solve my problem: const chasingBorders1 = keyframes`
  0% {
    clip-path: polygon(100% 0%, 100% 40%, 60% 0%, 100% 0%);
  }
  25% {
    clip-path: polygon(100% 60%, 100% 100%, 60% 60%, 100% 40%);
  }
  50% {
    clip-path: polygon(0% 100%, 40% 100%, 0% 60%, 40% 60%);
  }
  75% {
    clip-path: polygon(0% 0%, 0% 40%, 40% 0%, 40% 40%);
  }
  100% {
    clip-path: polygon(100% 0%, 100% 40%, 60% 0%, 100% 0%);
  }
`;

const chasingBorders2 = keyframes`
  0% {
    clip-path: polygon(0% 100%, 0% 60%, 40% 100%, 0% 100%);
  }
  25% {
    clip-path: polygon(0% 0%, 0% 40%, 40% 0%, 40% 40%);
  }
  50% {
    clip-path: polygon(100% 0%, 100% 40%, 60% 0%, 100% 0%);
  }
  75% {
    clip-path: polygon(100% 60%, 100% 100%, 60% 60%, 100% 40%);
  }
  100% {
    clip-path: polygon(0% 100%, 0% 60%, 40% 100%, 0% 100%);
  }
`;

const ModeBox = styled(motion.div)`
  position: absolute;
  top: 45px;
  left: 33.5%;
  background: #020202;
  border: solid 5px white;
  border-radius: 30px;
  width: 580px;
  height: 100px;
  z-index: 95;

  &::before, &::after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: solid 8px orange;
    border-radius: inherit;
    z-index: -1;
    box-shadow: 0 0 10px #6F5824, 0 0 15px #6F5824, 0 0 20px #6F5824;
  }

  &::before {
    animation: ${chasingBorders1} 4s infinite;
  }

  &::after {
    animation: ${chasingBorders2} 4s infinite;
  }
`;

Answer 1

作为一个选项，您可以应用线性渐变和旋转动画:

body {
  background-color: #000;
}

a{
  --border-radius: 16px;
  --border-width: 2px;
  padding: var(--border-width);
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
  will-change: transform;
  background-color: rgba(255,255,255,.1);
  display: inline-flex;
  color: #fff;
  text-decoration: none;
}


a span{
  padding: 12px 32px;
  background-color: #000;
  border-radius: calc(var(--border-radius) - var(--border-width));
}

a:before,
a:after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1;
  position: absolute;
  animation: rotate 4s linear infinite;
  inset: 50% auto auto 50%;
}

a:before {
  background: linear-gradient(to top, transparent 50%, orange);
  clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%);
}

a:after{
  clip-path: polygon(100% 100%,50% 100%,50% 50%, 100% 50%);
  background: linear-gradient(to bottom, transparent 50%, orange);
}

@keyframes rotate {
  0% {
    transform: translate(-50%,-50%) rotate(0);
  }
  100% {
    transform: translate(-50%,-50%) rotate(1turn);
  }
}

<a href="#"><span>Lorem ipsum.</span></a>