Html 蛇形边界动画

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

我还尝试了其他一些想法，比如有4个不同的绝对位置跨度，每个跨度都有一个before元素，该元素将根据previews元素的位置设置动画。但那只是一团糟（而且也不起作用）

看起来像这样的东西在纯CSS中是不可能的？我已经试着把这件事做了将近两天了，但没有一个解决方案像我希望的那样有效。以前有人做过这样的事吗？我需要将其制作成动画SVG才能工作吗？非常感谢您的帮助

---

由于边框正好由两条独立的线段组成，

：before

和

：：after

可能就足够了

总的来说，这是一个弄乱关键帧的问题。以下示例显示：

• 最左侧：仅

  ：：在
  之前，“head”元素显示

• 中间：仅

  ：：在
  之后，显示“tail”元素

• 最右边：两个伪元素；这是最终结果

body{背景色：#000000；}
.ex1、.ex2、.ex3{
显示：内联块；
宽度：150px；高度：150px；
利润率：0.20px；
}
.ex1.snake border:：在{content:none；}之后
.ex2.snake border:：在{content:none；}之前
/*蛇形边界的东西：*/
@关键帧蛇边界头{
/*
蛇的“头”伸向容器的一侧。
当这头撞到一个角落的时候，它立刻开始转动
拉伸下一侧。（这就是某些关键帧的原因。）
重复力矩，以创建这些瞬时跳跃）
*/
90%{左：0；顶：0；宽：0；高：40%；}
90%{左：0；顶：0；宽：0；高：0；}
100%{left:0；top:0；宽度：40%；高度：0；}0%{left:0；top:0；宽度：40%；高度：0；}
15%{左：60%；顶：0；宽：40%；高：0；}
15%{左侧：100%；顶部：0；宽度：0；高度：0；}
25%{左侧：100%；顶部：0；宽度：0；高度：40%；}
40%{左侧：100%；顶部：60%；宽度：0；高度：40%；}
40%{左侧：100%；顶部：100%；宽度：0；高度：0；}
50%{左：60%；顶：100%；宽：40%；高：0；}
65%{左：0；顶：100%；宽：40%；高：0；}
65%{左：0；顶：100%；宽：0；高：0；}
75%{左：0；顶：60%；宽：0；高：40%；}
}
@关键帧蛇的边界尾巴{
/*
当头部处于0时，蛇的“尾巴”处于全长
长度，反之亦然。尾巴总是成90度角
从头开始。
*/
90%{顶部：0%；高度：40%；}
100%{left:0；top:0；width:0；height:0；}0%{left:0；top:0；width:0；height:0；}
15%{宽度：40%；}
25%{左侧：100%；顶部：0；宽度：0；高度：0；}
40%{高度：40%；}
50%{左侧：100%；顶部：100%；宽度：0；高度：0；}
65%{左：0%；宽：40%；}
75%{左：0；顶：100%；宽：0；高：0；}
}
.蛇形边界{
位置：相对位置；
盒影：插入0 1px#00a0ff；
}
.snake border:：之前，.snake border:：之后{
内容：''；
显示：块；
位置：绝对位置；
外形：3px实心#00a0ff；
动画持续时间：6s；
动画计时功能：线性；
动画迭代次数：无限；
}
.snake border:：在{动画名称：snake border head；}之前
.snake border:：在{动画名称：snake border tail；}之后

---

因为边框正好由两条独立的线段组成，

：：before

和

：：after

可能就足够了

总的来说，这是一个弄乱关键帧的问题。以下示例显示：

• 最左侧：仅

  ：：在
  之前，“head”元素显示

• 中间：仅

  ：：在
  之后，显示“tail”元素

• 最右边：两个伪元素；这是最终结果

body{背景色：#000000；}
.ex1、.ex2、.ex3{
显示：内联块；
宽度：150px；高度：150px；
利润率：0.20px；
}
.ex1.snake border:：在{content:none；}之后
.ex2.snake border:：在{content:none；}之前
/*蛇形边界的东西：*/
@关键帧蛇边界头{
/*
蛇的“头”伸向容器的一侧。
当这头撞到一个角落的时候，它立刻开始转动
拉伸下一侧。（这就是某些关键帧的原因。）
重复力矩，以创建这些瞬时跳跃）
*/
90%{左：0；顶：0；宽：0；高：40%；}
90%{左：0；顶：0；宽：0；高：0；}
100%{left:0；top:0；宽度：40%；高度：0；}0%{left:0；top:0；宽度：40%；高度：0；}
15%{左：60%；顶：0；宽：40%；高：0；}
15%{左侧：100%；顶部：0；宽度：0；高度：0；}
25%{左侧：100%；顶部：0；宽度：0；高度：40%；}
40%{左侧：100%；顶部：60%；宽度：0；高度：40%；}
40%{左侧：100%；顶部：100%；宽度：0；高度：0；}
50%{左：60%；顶：100%；宽：40%；高：0；}
65%{左：0；顶：100%；宽：40%；高：0；}
65%{左：0；顶：100%；宽：0；高：0；}
75%{左：0；顶：60%；宽：0；高：40%；}
}
@关键帧蛇的边界尾巴{
/*
当头部处于0时，蛇的“尾巴”处于全长
长度，反之亦然。尾巴总是成90度角
从头开始。
*/
90%{顶部：0%；高度：40%；}
100%{left:0；top:0；width:0；height:0；}0%{left:0；top:0；width:0；height:0；}
15%{宽度：40%；}
25%{左侧：100%；顶部：0；宽度：0；高度：0；}
40%{高度：40%；}
50%{左侧：100%；顶部：100%；宽度：0；高度：0；}
65%{左：0%；宽：40%；}
75%{左：0；顶：100%；宽：0；高：0；}
}
.蛇形边界{
位置：相对位置；
盒影：插入0 1px#00a0ff；
}