蛇形边框动画[关闭]

Question

我一直在尝试创建一个看起来像附加图像中的边框动画。所以基本上，亮蓝色的线会围绕盒子旋转。线条也应该是 3px，而实际边框是 1px。我尝试了一些在 Codepen 上找到的解决方案，并试图让它们适用于我的情况。但所有 CSS 解决方案都不起作用。

我还尝试了其他一些想法，比如有 4 个不同的绝对定位 span，每个 span 都有一个 before 元素，该元素会根据 previews 元素的位置进行动画处理。但这只是一团糟（也不起作用）。

似乎纯 CSS 无法实现这样的事情？我已经尝试完成这项工作将近 2 天了，但没有一个解决方案能按预期工作。以前有人做过类似的事情吗？我是否需要将其制作为动画 SVG 才能工作？非常感谢任何帮助。

Answer 1

由于边框正好由两个单独的线段组成，::before 和 ::after 可能就足够了！

这总体上是一个搞乱@keyframes的问题。下面的例子显示：

• 最左边：仅::before，显示“head”元素
• 中间：仅::after，“tail”元素显示
• 最右边：两个伪元素；这是最终结果

body { background-color: #000000; }
.ex1, .ex2, .ex3 {
  display: inline-block;
  width: 150px; height: 150px;
  margin: 0 20px;
}

.ex1.snake-border::after { content: none; }
.ex2.snake-border::before { content: none; }

/* snake-border stuff: */
@keyframes snake-border-head {
  
  /*
  The snake's "head" stretches across a side of its container.
  The moment this head hits a corner, it instantly begins to
  stretch across the next side. (This is why some keyframe
  moments are repeated, to create these instantaneous jumps)
  */
  
  90% { left: 0; top: 0; width: 0; height: 40%; }
  90% { left: 0; top: 0; width: 0; height: 0; }
  100% { left: 0; top: 0; width: 40%; height: 0; } 0% { left: 0; top: 0; width: 40%; height: 0; }
  
  15% { left: 60%; top: 0; width: 40%; height: 0; }
  15% { left: 100%; top: 0; width: 0; height: 0; }
  25% { left: 100%; top: 0; width: 0; height: 40%; }
  
  40% { left: 100%; top: 60%; width: 0; height: 40%; }
  40% { left: 100%; top: 100%; width: 0; height: 0; }
  50% { left: 60%; top: 100%; width: 40%; height: 0; }
  
  65% { left: 0; top: 100%; width: 40%; height: 0; }
  65% { left: 0; top: 100%; width: 0; height: 0; }
  75% { left: 0; top: 60%; width: 0; height: 40%; }
  
}
@keyframes snake-border-tail {
  
  /*
  The "tail" of the snake is at full length when the head is at 0
  length, and vice versa. The tail always at a 90 degree angle
  from the head.
  */

  90% { top: 0%; height: 40%; }
  100% { left: 0; top: 0; width: 0; height: 0; } 0% { left: 0; top: 0; width: 0; height: 0; }
  
  15% { width: 40%; }
  25% { left: 100%; top: 0; width: 0; height: 0; }
  
  40% { height: 40%; }
  50% { left: 100%; top: 100%; width: 0; height: 0; }
  
  65% { left: 0%; width: 40%; }
  75% { left: 0; top: 100%; width: 0; height: 0; }
  
}

.snake-border {
  position: relative;
  box-shadow: inset 0 0 0 1px #00a0ff;
}
.snake-border::before, .snake-border::after {
  content: '';
  display: block;
  position: absolute;
  outline: 3px solid #00a0ff;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.snake-border::before { animation-name: snake-border-head; }
.snake-border::after { animation-name: snake-border-tail; }

<div class="ex1 snake-border"></div>
<div class="ex2 snake-border"></div>
<div class="ex3 snake-border"></div>

我使用方形容器完成了这项工作，并假设蛇的总长度是方形边长的 40%。如果你想使用矩形容器，或者一条绝对长度的蛇沿着动态大小的容器移动，你将不得不摆弄这些值。