边框底部动画

Question

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

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%; }
}

演示