css动画三根跳动的线

如果您想要为您的网站添加一些超酷的CSS动画，那么三根跳动的线可能是一个很好的选择。

.anim {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
}

.anim span {
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 6px;
  height: 30px;
  border-radius: 3px;
  background-color: #eaeaea;
  animation: jump 1s ease-in-out infinite;
}

.anim span:nth-child(2) {
  left: 15px;
  animation-delay: 0.2s;
}

.anim span:nth-child(3) {
  left: 30px;
  animation-delay: 0.4s;
}

@keyframes jump {
  50% {
    transform: translateY(-15px);
  }
}

上面的CSS代码将创建一个具有3条跳动的线的元素。该元素包含3个标签，每个标签都表示跳动的线段。

每个线段都通过指定其位置和动画效果进行定位。动画效果是通过使用@keyframes规则来实现的，其中跳动的线段将在50%的时间内向上移动。

您可以通过调整动画的持续时间和延迟时间来调整跳动的速度和节奏。此外，您可以通过更改颜色和大小等属性来自定义您的跳动的线。

通过在您的HTML和CSS中增加这个超酷的效果，您可以提高您网站的可视性和吸引力。