HTML JavaScript 数字变化特效

最新推荐文章于 2025-06-10 16:46:41 发布

正在修炼的IT大佬

最新推荐文章于 2025-06-10 16:46:41 发布

阅读量1k

点赞数 6

CC 4.0 BY-SA版权

文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_34045989/article/details/135731163

效果

案例一：上下滚动

案例二：本身变化

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数字滚动变化动画</title>
  </head>
  <style>
    *{
        margin:0;
        padding: 0;
    }
    /* 滚动变化相关 */
    .valScrollAmt-box {
      display: flex;
      height: 50px;
      overflow: hidden;
      font-size: 50px;
      font-weight: bold;
      line-height:50px;
      margin: 10px 10px;

    }
    .digit-container {
      display: flex;
      flex-direction: column;
      line-height: 50px;
    }

    /* 动态变化 */
    .valChangeAmt-box {
      font-size: 50px;
      font-weight: bold;
      lin