边框底部动画

Question

如何制作像here这样的底部边框动画？在主标题中。

Answer 1

首先，这不是边框底部，它肯定没有附加到主标题。当转盘滑动到下一张图像时，它是一个计时器。

无论如何，要实现那种动画，你可以使用CSS3。

HTML：

<div class="timer-wrapper">
  <div class="timer"></div>
</div>

CSS：

.timer-wrapper {
  width: 100%;
  height: 3px;
}

.timer {
  width: 0px;
  height: 2px;
  background: blue;
  animation: timerAnimation 5s ease;
}

@keyframes timerAnimation {
  from { }
  to { width: 100%; }
}

Demo