css3动画旋转动画_如何建立动画CSS温度计图

最新推荐文章于 2023-03-31 11:11:32 发布

daique1908

最新推荐文章于 2023-03-31 11:11:32 发布

阅读量540

点赞数

文章标签：列表 css java html python

本教程介绍了如何使用CSS3创建一个动画温度计图表，用于可视化数据，特别是在跟踪目标达成情况时。从数据和页面标记开始，通过定义基本样式和设置图表样式，包括y轴、x轴和动画效果，逐步构建图表。最后，当图表动画完成后，显示相应的标签。

摘要由CSDN通过智能技术生成

css3动画旋转动画

到目前为止，在我们CSS图表系列教程中，我已经向您展示了如何构建柱形图，条形图和半圆甜甜圈图。

在本教程中，我将介绍创建纯CSS动画“温度计”图表的过程。跟踪单个目标达成情况的完美方法。

这是我们将要创建的图表（点击重新加载即可看到动画）：

就本演示而言，我们将需要一些数据。让我们使用一些虚构的数字来描述多年来慈善组织的资金投入：

您可能已经猜到了，我们的挑战是在温度计图表中可视化此数据。我们将从那些麻烦的出色灭绝叛乱中汲取视觉灵感（如果您还没有听说过，请查看它们的作用！）。

我们将指定一个包装器元素，其中包含三个列表：

第一个列表设置y轴范围。如果您仔细查看上面的表格数据，您会发现第二列包含的值最大为95,000。牢记这一点，我们将定义0到100,000之间的六个值，步长为20,000。因此，y轴的值为0、20,000、40,000、60,000、80,000和100,000。
第二个列表设置x轴数据。这些是从表的第一列中提取的，从最低到最高。但是它们的顺序并不重要，因为我们将对其进行绝对定位。不过请注意，在下面的标记中，列表项两次包含同一年份。我们可以省略将年份设置为项目的文本节点。但是将这个值存储在data-year属性中很重要。稍后我们将看到，我们将该属性的值传递给相关的::before伪元素。
第三个列表将上述表格数据从最高融资额到最低融资额进行分组。同样，这里的顺序并不重要。您也可以从最低到最高显示它们。这完全取决于您。

这是必需的标记：

<div class="chart-wrapper">
  <ul class="chart-y">
    <li>€100,000</li>
    ...
  </

关注