css实现边框贪食蛇条滚动特效

实现边框贪食蛇条滚动特效可以使用CSS动画和伪元素来实现。

与虚线特效类似，我们可以通过CSS定义一个带有边框线的矩形块，并给其添加动画效果。但是，滚动特效需要在动画过程中不断增加边框线的长度，因此我们需要使用伪元素来实现。

以下是实现代码：

HTML代码：

<div class="snake"></div>

CSS代码：

.snake {
  position: relative;
  width: 100px;
  height: 20px;
  border: 2px solid #000;
  overflow: hidden;
  animation: snake-move 5s linear infinite;
}

.snake::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 0;
  height: calc(100% + 4px);
  border: 2px solid #000;
  animation: snake-border 5s linear infinite;
}

@keyframes snake-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(80px);
  }
}

@keyframes snake-border {
  0% {
    width: 0;
  }
  100% {
    width: calc(100% + 4px);
  }
}

解析：

- .snake：定义一个矩形块，并设置其边框线样式为实线，并设置overflow为hidden，用于隐藏伪元素的超出部分。
- .snake::before：定义一个伪元素，通过设置它的边框线样式为实线，并设置width为0，用于实现边框线的滚动效果。
- keyframes：定义两个动画，其中一个通过transform属性来实现矩形块的移动效果，另一个通过width属性来实现边框线的滚动效果。

代码中的关键点是使用动画来控制伪元素的边框线长度，通过变化的宽度来实现边框线的滚动效果。同时，通过overflow属性来隐藏伪元素的超出部分，使得边框线看起来是在矩形块内滚动。