边框底部动画[重复]

【问题标题】：Border bottom animation [duplicate]边框底部动画[重复]
【发布时间】：2016-04-01 05:44:28
【问题描述】：

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

【问题讨论】：

【解决方案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

【讨论】：