首页 / 技术问答 / Html问答列表 / 问答详情

Html CSS动画积分计数器

我试图得到一个横幅放置在一个HTML页面使用CSS动画运行计数器到一个特定的数字，但有一个有点问题时，试图得到一个以上的工作在同一横幅，数字将计数到不同的数额取决于div，第一次try 实现这一点，并将感谢任何帮助.

html,
body {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: roboto, segoe ui, Verdena, Helvetica, Sans-Serif;
  font-size: 16px;
  /*text-transform: uppercase;
    color: #000; */
}

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

div span.years-number {
  animation: counter 5s forwards ease-in-out;
  counter-reset: num var(--num);
  font: 800 40px system-ui;
  padding: 2rem;
}

div span.years-number::after {
  content: counter(num);
}

@keyframes counter {
  from {
    --num: 0;
  }
  to {
    --num: 20;
  }
}

div span.project-number::after {
  content: counter(num);
}

@keyframes counter {
  from {
    --num: 0;
  }
  to {
    --num: 55;
  }
}

div span.employee-number::after {
  content: counter(num);
}

@keyframes counter {
  from {
    --num: 0;
  }
  to {
    --num: 10;
  }
}

div span.customers-number::after {
  content: counter(num);
}

@keyframes counter {
  from {
    --num: 0;
  }
  to {
    --num: 115;
  }
}
<section style="position: relative; z-index: 1; text-align: center;">
  <div style="flex: 0 0 auto; width: 25%; scroll-behavior: inherit !important;">
    <div class="single-counter">
      <div class="counter-contents">
        <h2 style="color: #000000; font-size: 45px; font-weight: 700; margin-bottom: 5px; word-spacing: -10px;">
          <span class="years-number"></span>
          <span>+</span>
        </h2>
        <h3 style="color: #000; font-size: 20px; font-weight: 600;">Years of Experience</h3>
      </div>
    </div>
  </div>
  <div style="flex: 0 0 auto; width: 25%; scroll-behavior: inherit !important;">
    <div class="single-counter">
      <div class="counter-contents">
        <h2 style="color: #000; font-size: 45px; font-weight: 700; margin-bottom: 5px; word-spacing: -10px;">
          <span class="project-number"></span>
          <span>+</span>
        </h2>
        <h3 style="color: #000; font-size: 20px; font-weight: 600;">Complete Project</h3>
      </div>
    </div>
  </div>
  <div style="flex: 0 0 auto; width: 25%; scroll-behavior: inherit !important;">
    <div class="single-counter">
      <div class="counter-contents">
        <h2 style="color: #000; font-size: 45px; font-weight: 700; margin-bottom: 5px; word-spacing: -10px;">
          <span class="employee-number"></span>
          <span>+</span>
        </h2>
        <h3 style="color: #000; font-size: 20px; font-weight: 600;">Employees</h3>
      </div>
    </div>
  </div>
  <div style="flex: 0 0 auto; width: 25%; scroll-behavior: inherit !important;">
    <div class="single-counter">
      <div class="counter-contents">
        <h2 style="color: #000; font-size: 45px; font-weight: 700; margin-bottom: 5px; word-spacing: -10px;">
          <span class="customers-number"></span>
          <span>+</span>
        </h2>
        <h3 style="color: #000; font-size: 20px; font-weight: 600;">Customers</h3>
      </div>
    </div>
  </div>
</section>

推荐答案

我知道你遇到的问题.问题出现了，因为CSS动画(正如您在这里try 实现的那样)不支持在@keyframes规则中直接用于不同元素的动态最终值.此外，您定义了多个具有相同名称(计数器)的@keyframes规则，这是无效的，因 for each @keyframes动画名称必须是唯一的.

为了解决您的问题，我们需要更有效地使用CSS自定义属性(变量)，并确保每个计数器都有自己唯一的动画.下面是一个改进的方法:

for each 计数器类型(年份、项目、员工和客户)定义唯一的@关键帧动画.这是必要的，因 for each 计数器都应该以不同的值结束. 使用CSS自定义属性设置每个计数器的结束值.这将允许我们通过样式属性或CSS规则直接控制元素上计数器的结束值.

下面是修改后的代码:

html,
body {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: roboto, segoe ui, Verdena, Helvetica, Sans-Serif;
  font-size: 16px;
}

@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

div span {
  counter-reset: num var(--num);
  font: 800 40px system-ui;
  padding: 2rem;
  animation: var(--animation) 5s forwards ease-in-out;
}

div span::after {
  content: counter(num) '+';
}

@keyframes counter-years {
  from {
    --num: 0;
  }
  to {
    --num: 20;
  }
  /* Adjust these values as needed */
}

@keyframes counter-projects {
  from {
    --num: 0;
  }
  to {
    --num: 55;
  }
  /* Adjust these values as needed */
}

@keyframes counter-employees {
  from {
    --num: 0;
  }
  to {
    --num: 10;
  }
  /* Adjust these values as needed */
}

@keyframes counter-customers {
  from {
    --num: 0;
  }
  to {
    --num: 115;
  }
  /* Adjust these values as needed */
}
<section style="
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 100%;
      ">
  <div class="single-counter">
    <div class="counter-contents">
      <h2>
        <span class="years-number" style="--animation: counter-years"></span>
      </h2>
      <h3>Years of Experience</h3>
    </div>
  </div>
  <div class="single-counter">
    <div class="counter-contents">
      <h2>
        <span class="project-number" style="--animation: counter-projects"></span>
      </h2>
      <h3>Complete Projects</h3>
    </div>
  </div>
  <div class="single-counter">
    <div class="counter-contents">
      <h2>
        <span class="employee-number" style="--animation: counter-employees"></span>
      </h2>
      <h3>Employees</h3>
    </div>
  </div>
  <div class="single-counter">
    <div class="counter-contents">
      <h2>
        <span class="customers-number" style="--animation: counter-customers"></span>
      </h2>
      <h3>Customers</h3>
    </div>
  </div>
</section>

通过这样做，可以确保每个计数器都有自己的动画时间轴和结束值，这是通过CSS自定义属性控制的.

如果它是有用的，并解决了问题，请接受答案:)

Html相关问答推荐

如何正确使用counter()、counter—increment()和counter—reset()嵌套标题？

标签数据的XPath？

如何在元素的三条边中间换行边框？

创建带有弯曲边框的水平时间线

HTMLTag属性内的svelte+TS类型声明

如何使背景图像在面包屑中相互重叠

悬停表格单元格文本时，使元素的字体大小更大，同时保持表格单元格的高度不变

带有图像的虚线边框

为 HTML5 文本字段设置最后六位正则表达式模式

如何从 div 内的图像中删除填充而不从其他所有内容中删除填充？

悬停时宽度从 0 过渡到自动

如何在 flex 项目中忽略子元素的宽度

CSS flex：0 0 auto创建了1像素的间隙

视频添加到 Html 与 Github 不同步

单击时 HTML 锚元素不重定向到相对路径

Mediawiki css/html 信息框创建空白行

暗模式转换器

需要禁用聚焦输入的工具提示(jquery)

使用 rgba() 的 css 中的边框不透明度不起作用

在部分而不是正文中定义页面宽度

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630