CSS模拟假的数字加载效果

在Web开发中，我们经常需要创建各种动态效果来增强用户体验。数字加载效果是其中之一，可以让用户知道某个过程正在进行中。在这里，我将向您展示如何使用CSS来模拟一个假的数字加载效果，让数字逐渐增加到一个特定的值

HTML 结构

首先，我们需要一个HTML元素来容纳这个加载效果。让我们创建一个<div>元素，其中包含一个用于展示数字的子元素。

<div class="number-loader">
  <span class="number">0</span>
</div>

CSS 样式

接下来，我们将使用CSS来创建加载效果。我们将使用@keyframes规则来定义动画，并使用伪元素::before来模拟逐渐增加的数字。以下是CSS代码：

.number-loader {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px solid #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  overflow: hidden;
}

.number-loader::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #00ff00, #008800);
  transform: translateY(100%);
  animation: loadingAnimation 3s infinite linear;
}

@keyframes loadingAnimation {
  0%, 100% {
    transform: translateY(100%);
  }
  50% {
    transform: translateY(0);
  }
}

在这段CSS代码中，我们首先设置了.number-loader的基本样式，使其成为一个圆形的容器，并在其中居中显示数字。然后，我们使用::before伪元素来创建一个绿色的背景，这个背景将会模拟逐渐增加的数字。

动画解释

我们使用了@keyframes规则来定义了一个名为loadingAnimation的动画。这个动画将在.number-loader::before上应用，并且会让背景颜色从底部逐渐上升，模拟数字加载的效果。动画持续时间为3秒，无限循环，采用线性缓动函数。

• 在动画的0%和100%阶段，背景位置从底部移动100%。这会让背景一开始就位于容器的底部，并在动画结束时回到底部，产生循环的效果。
• 在动画的50%阶段，背景位置移到容器的顶部，模拟数字加载到一半的效果。