蛇形边框动画 [英] Snake-like border animation

问题描述

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

I've been trying to create a border animation that would look like in the attached image. So basically, the bright blue line will rotate around the box. The line should also be 3px whereas the actual border is 1px. I tried a few solutions I found on Codepen and tried to make them work for my case. But none of the CSS solutions worked.

我还尝试了其他一些想法，例如有 4 个不同的绝对定位跨度，每个跨度都有一个 before 元素，该元素将根据预览元素的位置进行动画处理.但这只是一团糟(而且也没有用).

I also tried a few other ideas, like having 4 different absolute positioned spans and each span has a before element that would animate according to the position of the previews element. But that was just a mess (and did not work either).

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

It seems something like this is not possible with pure CSS? I've been trying to get this done for almost 2 days now and none of the solutions were working as hoped. Anybody done something like that before? Would I need to make this an animated SVG in order to work? Any help is much appreciated.

推荐答案

由于边框正好由两条独立的线段组成，::before 和 ::after 可以足以做到这一点！

Since the border consists of exactly two separate line segments, ::before and ::after may be sufficient to do the trick!

这总体上是一个与 @keyframes 混淆的问题.以下示例显示:

This is overall a question of messing with @keyframes. The following example shows:

• 最左边:只有 ::before，head"；元素显示
• middle:只有 ::after，tail"；元素显示
• 最右边:两个伪元素；这是最终的结果

• leftmost: only ::before, "head" element showing
• middle: only ::after, "tail" element showing
• rightmost: both pseudo-elements; this is the final result

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%.如果您想使用矩形容器，或者沿着动态大小的容器移动的绝对长度的蛇，您将不得不摆弄这些值.

I accomplished this using square containers, and the assumption that the snake's total length is 40% of the square's side-length. If you want to use rectangular containers, or an absolute-length snake travelling along a dynamically sized container, you'll have to fiddle with the values.

这篇关于蛇形边框动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！