返回

Pure CSS 实现数字自增的动画效果

前端

前言

最近在群里摸鱼时，讨论到 CSS houdini 能提供哪些能力，其中有一些能力还在规范中，有一些能力已经被部分浏览器支持了。我于是找到其中一个新增的 at-rule CSS 规则 @property，打算玩一玩。@property 规则允许开发者定义自定义的 CSS 属性，这个属性可以被 JavaScript 或者其他的 CSS 规则访问和修改。

CSS Houdini

CSS Houdini 是一个正在开发的 CSS 规范，它允许开发者更深入地控制浏览器如何渲染网页。Houdini 为开发者提供了一系列新的 API，这些 API 可以用来操作 CSS 的各个方面，比如：

  • 定义自定义的 CSS 属性
  • 修改 CSS 属性的值
  • 访问和修改 CSS 规则
  • 创建和修改 CSS 动画

实现原理

使用 CSS 实现数字自增的动画效果，可以利用 CSS 计数器和自定义属性相结合。具体实现步骤如下：

  1. 创建一个 CSS 计数器，并将其初始值设置为 0。
  2. 将 CSS 计数器附加到要进行动画的元素。
  3. 使用自定义属性来存储 CSS 计数器的当前值。
  4. 使用 CSS 动画来修改自定义属性的值，从而实现数字自增的动画效果。

代码实现

/* 定义 CSS 计数器 */
@counter reset counter 0;

/* 将 CSS 计数器附加到要进行动画的元素 */
#element {
  counter-increment: counter;
}

/* 使用自定义属性来存储 CSS 计数器的当前值 */
#element::before {
  content: counter(counter);
}

/* 使用 CSS 动画来修改自定义属性的值，从而实现数字自增的动画效果 */
#element {
  animation: count-up 5s infinite;
}

@keyframes count-up {
  from {
    --counter-value: 0;
  }

  to {
    --counter-value: 100;
  }
}

效果预览

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="element"></div>
</body>
</html>

总结

本文介绍了如何使用纯 CSS 实现数字自增的动画效果。通过使用 CSS 计数器和自定义属性相结合，可以实现数字自增的动画效果。这种方法简单易行，并且不需要使用 JavaScript。