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

css3动画旋转动画

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

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

我们正在建设什么

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

1.从数据开始

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

年	资金
2018年	€95,000
2016年	€72,000
2015年	€50,000
2012年	€35,000
2010	€15,000

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

2.指定页面标记

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

• 第一个列表设置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>
    ...
  </ul>
  <ul class="chart-x">
    <li data-year="2010">2010</li>
    ...
  </ul>
  <ul class="chart-labels">
    <li>2018 - €95,000</li>
    ...
  </ul>
</div>

3.定义一些基本样式

接下来，我们将设置一些CSS变量和一些常见的重置样式：

@font-face {
  font-family: "Cheddar Gothic Sans";
  src: url("cheddargothic-sans-webfont.woff2") format("woff2"),
       url("cheddargothic-sans-webfont.woff") format("woff");
}

:root {
  --brand-color: #21a73d;
  --chart-bg-color: rgba(211, 211, 211, .3);
  --chart-line-color: black;
  --chart-x-color: white;  
  --line-color1: crimson;
  --line-color2: gold;
  --line-color3: firebrick;
  --line-color4: orange;
  --line-color5: darkblue;
  --black: #2d2929;
  --white: white;
  --transition-delay: 0.6s;
  --transition-delay-step: 0.6s;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

body {
  font: 1rem/1.2 Georgia, serif;
  padding-top: 70px;
  background: var(--brand-color);
}

这里没有什么特别壮观的事情，但是可能要注意的是，除了著名的“ Georgia”系统衬线字体之外，我还使用了来自Envato Elements的高级“ Cheddar Gothic”字体。

注意 ：为简单起见，我不会遍历本教程中的所有 CSS规则。 您可以通过单击演示项目的CSS选项卡检查其余部分。

4.设置图表样式

图表包装器将是具有水平居中内容的网格容器。 每列（列表）将具有其默认宽度，它们之间有4rem的间距。

以下是相关CSS：

.chart-wrapper {
  display: grid;
  justify-content: center;
  grid-column-gap: 4rem;
  grid-template-columns: auto auto auto;
}

y轴

包含y轴数据的第一个列表也将充当网格容器。 这些项目之间会有3rem的差距：

这是关联CSS：

.chart-wrapper .chart-y {
  display: grid;
  grid-row-gap: 3rem;
}

X轴

包含x轴数据的第二个列表将具有50px的固定宽度。 此外，我们将为它提供一些其他样式，使其具有真实温度计的外观：

对应的样式如下：

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x {
  position: relative;
  width: 50px;
  border-radius: 25px;
  border: 8px solid var(--chart-line-color);
  background: var(--chart-bg-color);
  overflow: hidden;
}

列表项将以初始高度0-绝对定位，因此默认情况下将不可见。 我们要做的另一件事是将其前景色设置为透明。 在这种情况下，包含年份的文本将不可见：

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x li {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  color: transparent;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  background: var(--chart-x-color);
  transition: height 0.5s ease-out;
}

下一步，我们将为::before伪元素指定一些样式。 请记住，其内容将包含关联的data-year属性的值（请参见上面的标记）。 另外，它最初会被隐藏：

所需样式：

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x li::before {
  content: attr(data-year);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-top: 4px solid;
  width: 20px;
  opacity: 0;
  padding-left: 3px;
  color: var(--black);
  font-size: 0.75rem;
  transition: opacity 0.5s ease-out;
}

.chart-wrapper .chart-x li:nth-child(1)::before {
  border-color: var(--line-color1);
}

.chart-wrapper .chart-x li:nth-child(2)::before {
  border-color: var(--line-color2);
}

.chart-wrapper .chart-x li:nth-child(3)::before {
  border-color: var(--line-color3);
}

.chart-wrapper .chart-x li:nth-child(4)::before {
  border-color: var(--line-color4);
}

.chart-wrapper .chart-x li:nth-child(5)::before {
  border-color: var(--line-color5);
}

动画项目

页面加载后，列表项的高度将被设置为动画，并接收一个值，该值将由相关的资金值确定（请参见上表）。 例如，值15,000对应于height: 15% 。 除了列表项之外，它们的::before伪元素也将被动画化，尽管动画不会同时运行。 该项目将首先变为可见，然后变为其伪元素。

现在，将以上所有需求转换为代码。

页面加载后，我们首先将loaded类添加到body ：

window.addEventListener("load", () => {
 document.body.classList.add("loaded"); 
});

此时，可以按顺序对项目进行动画处理。 为此，我们将利用我先前的图表演示中使用的技术。 我们将定义两个CSS变量来确定过渡速度（如有需要，可以随意更改），并将它们与calc()函数结合使用。

以下是负责揭示x轴项目CSS样式：

/*CUSTOM VARIABLES HERE*/

.loaded .chart-wrapper .chart-x li:nth-child(1) {
  height: 15%; /*represents €15,000*/
  transition-delay: var(--transition-delay);
}

.loaded .chart-wrapper .chart-x li:nth-child(2) {
  height: 35%;  /*represents €35,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step)
  );
}

.loaded .chart-wrapper .chart-x li:nth-child(3) {
  height: 50%;  /*represents €50,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 2
  );
}

.loaded .chart-wrapper .chart-x li:nth-child(4) {
  height: 72%;  /*represents €72,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 3
  );
}

.loaded .chart-wrapper .chart-x li:nth-child(5) {
  height: 95%;  /*represents €95,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 4
  );
}

正如先前的图表演示中已经提到的那样，Microsoft Edge不支持这些数学运算，因此，如果需要支持它，则必须传递一些静态值，如下所示：

.loaded .chart-wrapper .chart-x li:nth-child(2) {
  height: 15%;
  transition-delay: 1.2s;
}

.loaded .chart-wrapper .chart-x li:nth-child(3) {
  height: 35%;
  transition-delay: 1.8s;
}

注意：我可以像这样在已loaded类之外定义transition-delay属性：

.chart-wrapper .chart-x li:nth-child(1) {
  transition-delay: var(--transition-delay);
}

无论哪种情况，结果都是相同的。 直到页面加载，动画才会运行。 我只选择在已loaded类中包含该属性，因为我想限制CSS代码并分组共享相同选择器的属性，例如这两个选择器：

.loaded .chart-wrapper .chart-x li:nth-child(1) {
  height: 15%; /*represents €15,000*/
}

.chart-wrapper .chart-x li:nth-child(1) {
  transition-delay: var(--transition-delay);
}

如先前步骤中所述， ::before伪元素也应出现在页面加载中：

.loaded .chart-wrapper .chart-x li::before {
  opacity: 1;
}

但是更大的延迟：

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x li:nth-child(1)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step)
  );
}

.chart-wrapper .chart-x li:nth-child(2)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 2
  );
}

.chart-wrapper .chart-x li:nth-child(3)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 3
  ); 
}

.chart-wrapper .chart-x li:nth-child(4)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 4
  );
}

.chart-wrapper .chart-x li:nth-child(5)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 5
  );
}

标签

默认情况下，将隐藏包含表数据的第三个列表。

但是，当图表动画结束时，它将出现：

.chart-wrapper .chart-labels {
  opacity: 0;
  transition: opacity .6s 3.8s; 
}

.loaded .chart-wrapper .chart-labels {
  opacity: 1;
}

请注意， transition-delay属性的值设置为3.8s。 我们将使用此值，因为x轴的最后::before元素的transition-delay属性设置为3.6s：

最后，我们将使用其列表项的::before伪元素创建一个彩色矩形，该矩形将显示在每个项的左角：

这是所需的样式：

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-labels li::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.chart-wrapper .chart-labels li:nth-child(1)::before {
  background: var(--line-color5);
}

.chart-wrapper .chart-labels li:nth-child(2)::before {
  background: var(--line-color4);
}

.chart-wrapper .chart-labels li:nth-child(3)::before {
  background: var(--line-color3);
}

.chart-wrapper .chart-labels li:nth-child(4)::before {
  background: var(--line-color2);
}

.chart-wrapper .chart-labels li:nth-child(5)::before {
  background: var(--line-color1);
}

我们的最终项目如下所示！

结论

就是这样！ 在本教程中，我们构建了一个纯CSS动画温度计图表。 我希望您发现此练习很有趣，并且会挑战您创建自己CSS图表。

一如既往，感谢您的阅读！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-a-css-thermometer-chart--cms-33437

css3动画旋转动画