devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

[译]CSS3实现柱状图的3D立体动画效果

作者：weixin_40725706 | 2024-02-16 21:24:12

赞

踩

css barchart 动画
翻译自 《Animated 3D Bar Chart with CSS3》

首先，我们看一看要实现的效果：

这篇文章所实现的动画效果起源于一个小小的想法，这个想法来自于另一个网站的一篇文章，它介绍了如何在网页中使用CSS、图片和JavaScript创建立体的柱状图。在阅读了那篇文章之后，我想挑战一下，尝试使用纯CSS来实现相同的效果。一开始的难点在于创建一个六面半透明的立方体，而后面的难点在于如何创建一个完整的带有动画效果的3D柱状图。下面，我们就一起来看一下如何解决这些难点。

让我们先列举一些要实现的要求，我们所实现的柱状图应该是：

  • 背景独立（即柱状图与背景互不影响）
  • 自适应的（柱子数量的多少不会影响布局）
  • 可缩放（如矢量图一样）
  • 易于定制（颜色、尺寸和比例）

计划是任何项目中最重要的一个部分。所以我们要先制定一个计划。

在实际编码之前，我通常会列出项目中我会遇到的潜在挑战和解决这些挑战的方案，然后重复这个过程，直到我得到一个看起来可以执行的策略的东西。下面是我为这个项目提出的挑战列表和解决方案：

挑战1 - 带有可伸缩内核的柱子

我们知道：

  • 一个柱状图是由6个面组成的立体图形
  • 这个柱状图的内核是可以垂直伸缩的，并且有一个选项可以隐藏它

所以，我们需要：

  • 一个div，生成柱状图的三个面（背部、底部、左侧）
  • 一个div，生成柱状图的另三个面（正面、顶部、右侧）
  • 一个div，生成内核柱体的三个面，与上面的第二个div类似，但是它的z-index值要小
  • 一个div，作为容器，用于定位以上的三个组件，并且在右下角实现一个实色的背景
  • 一个div，带有overflow: hidden的容器，用于内核柱体的高度为0时，隐藏它。

总共有五个div。

你可能想知道为什么我们需要两个容器？嗯，这是一个不好解释的问题，但我会尝试着说明清楚。

每个柱体我们需要至少一个容器（以保证前三个div的位置），由于我们的柱体内核是可伸缩的，所以我们使用百分比来操纵内核的高度，这就要求容器的高度等于条形图Y轴的高度。

这看起来很好，但是，有另外一个问题，应该有一个选项可以隐藏移动中的内核，这意味着它应该“低于柱体”并且隐藏。你可能会说有一个解决方法 - overflow: hidden，是的，但是它不适用于这里的容器，因为它的高度要比实际的柱体高度短，这就是我们为什么要添加另一个容器的原因。

希望我说清楚了，下面我们继续。

挑战2 - 坐标轴

坐标轴应该：

  • 是一个三维立体坐标轴，它包含3个面（背景面，X轴面，Y轴面）
  • 背景独立
  • 自适应柱体的数量和属性（width，height等）
  • 外侧有X轴与Y轴的文字标签

所以，我们需要：

  • 一个无序列表
  • X轴标签的每个列表项内有一个span元素
  • 每个列表项中有一个柱体
  • Y轴标签内包含一个无序列表

实现

现在我们有了一个总体的计划，让我们把它转换成代码。

请注意，文章中的代码没有写浏览器前缀。在实际的项目中请不要省略。

挑战1 - 带有可伸缩内核的柱子

  1. <div class="bar-wrapper">
  2.   <div class="bar-container">
  3.     <div class="bar-background"></div>
  4.     <div class="bar-inner">50</div>
  5.     <div class="bar-foreground"></div>
  6.   </div>
  7. </div>复制代码

让我们再次回顾每个元素的用途：

  • bar-wrapper – 当.bar-inner滑动到柱体的下方时隐藏它
  • bar-container – 作为.bar-foreground, .bar-inner, .bar-foreground定位的参考元素，并设置底角的背景颜色
  • bar-background – 生成柱状图的三个面（背部、底部、左侧）
  • bar-inner – 最重要的部分 – 柱子内核
  • bar-foreground – 生成柱状图的另三个面（正面、顶部、右侧）

首先，让我们设置容器的样式。

  1. /* Bar wrapper容器 - 当内核低于柱体高度时隐藏内核，必需的 */
  2. .bar-wrapper {
  3.   overflow: hidden;
  4. }
  5. /* Bar container容器 - 这家伙是柱形图里真正的家长——子元素都是相对于它定位的。 */
  6. .bar-container {
  7.   position: relative;
  8.   margin-top: 2.5em;
  9.   width: 12.5em;
  10. }
  11. /* 右下角的小块 - 确保内核向下滑动时右下角被“切割” */
  12. .bar-container:before {
  13.   content: "";
  14.   position: absolute;
  15.   z-index: 3;
  16.  
  17.   bottom: 0;
  18.   right: 0;
  19.  
  20.   width: 0;
  21.   height: 0;
  22.   border-style: solid;
  23.   border-width: 0 0 2.5em 2.5em;
  24.   border-color: transparent transparent rgba(183,183,183,1);
  25. }复制代码

请注意，我们将.bar-container的宽度设置为12.5em。这个数字是柱体的正面和右侧宽度的总和-在我们的示例中，它是10+2.5=12.5。

我们还使用border属性来创建三角形，并将其放置在 .bar-container的右下角，以确保内核的侧边在垂直移动时能被“切割”。我们使用：before伪类来生成这个元素。

下面我们来设置.bar-background：

  1. /* 背面 */
  2. .bar-background {
  3.   width: 10em;
  4.   height: 100%;
  5.   position: absolute;
  6.   top: -2.5em;
  7.   left: 2.5em;
  8.   z-index: 1;
  9. }
  10.  
  11. .bar-background:before,
  12. .bar-background:after {
  13.   content: "";
  14.   position: absolute;
  15. }
  16.  
  17. /* 底面 */
  18. .bar-background:before {
  19.   bottom: -2.5em;
  20.   right: 1.25em;
  21.   width: 10em;
  22.   height: 2.5em;
  23.   transform: skew(-45deg);
  24. }
  25.  
  26. /* 左后面 */
  27. .bar-background:after {
  28.   top: 1.25em;
  29.   right: 10em;
  30.   width: 2.5em;
  31.   height: 100%;
  32.  
  33.   /* 仅倾斜Y轴 */
  34.   transform: skew(0deg, -45deg);
  35. }复制代码

如你所见，我们将.bar-background向上和向右移动2.5em。当然，我们把左后面和底面倾斜45度。请注意，:after伪元素中将第一个倾斜值设置为0deg，第二个设置为-45度，这样只倾斜元素的Y轴。

接着来设置.bar-foreground：

  1. /* 前面 */
  2. .bar-foreground {
  3.     z-index: 3; /* 在 .bar-background 和.bar-inner 之上 */
  4. }
  5. .bar-foreground,
  6. .bar-inner {
  7.   position: absolute;
  8.   width: 10em;
  9.   height: 100%;
  10.   top: 0;
  11.   left: 0;
  12. }
  13.  
  14. .bar-foreground:before,
  15. .bar-foreground:after,
  16. .bar-inner:before,
  17. .bar-inner:after {
  18.   content: "";
  19.   position: absolute;
  20. }
  21.  
  22. /* 右前面 */
  23. .bar-foreground:before,
  24. .bar-inner:before {
  25.   top: -1.25em;
  26.   right: -2.5em;
  27.   width: 2.5em;
  28.   height: 100%;
  29.   background-color: rgba(160, 160, 160, .27);
  30.  
  31.   transform: skew(0deg, -45deg);
  32. }
  33.  
  34. /* 前面 */
  35. .bar-foreground:after,
  36. .bar-inner:after {
  37.   top: -2.5em;
  38.   right: -1.25em;
  39.   width: 100%;
  40.   height: 2.5em;
  41.   background-color: rgba(160, 160, 160, .2);
  42.  
  43.   transform: skew(-45deg);
  44. }复制代码

这里没什么新鲜的，一切都和.bar-background的样式一样，只是方向不同。

其中，部分的样式同时应用在了.bar-foreground和.bar-inner元素上，因为它们的样子是完全相同的。

好了，下面我们继续设置内核的样式。

  1. .bar-inner {
  2.   z-index: 2; /* 在.bar-background的上面 */
  3.   top: auto; /* 重置 top属性 */
  4.   background-color: rgba(5, 62, 123, .6);
  5.   height: 0;
  6.   bottom: -2.5em;
  7.   color: transparent; /* 隐藏文字 */
  8.  
  9.   transition: height 1s linear, bottom 1s linear;
  10. }
  11.  
  12. /* 右面 */
  13. .bar-inner:before {
  14.   background-color: rgba(5, 62, 123, .6);
  15. }
  16.  
  17. /* 上面 */
  18. .bar-inner:after {
  19.   background-color: rgba(47, 83, 122, .7);
  20. }复制代码

好了，柱体的样式就设置好了，接下来我们来看坐标轴。

挑战2 - 坐标轴

  1. <ul class="graph-container">
  2.   <li>
  3.     <span>2011</span>
  4.     <-- 此处显示柱状图图的HTML标记 -->
  5.   </li>
  6.   <li>
  7.     <span>2012</span>
  8.     <-- 此处显示柱状图图的HTML标记 -->
  9.   </li>
  10.   <li>
  11.     <ul class="graph-marker-container">
  12.       <li><span>25%</span></li>
  13.       <li><span>50%</span></li>
  14.       <li><span>75%</span></li>
  15.       <li><span>100%</span></li>
  16.     </ul>
  17.   </li>
  18. </ul>复制代码

如您所见，我们在项目中使用无序列表和span元素来定位X轴和Y轴标签。

  1. /** 坐标轴容器 **/
  2. .graph-container {
  3.   position: relative; 
  4.   display: inline-block; 
  5.   padding: 0; 
  6.   list-style: none; /* 去除列表元素自带的小黑点 */
  7.  
  8.   /* 背景 */
  9.   background-image: linear-gradient(left , rgba(255, 255, 255, .3) 100%, transparent 100%);
  10.   background-repeat: no-repeat;
  11.   background-position: 0 -2.5em;
  12. }复制代码

这里有一个小点，我们使用线性渐变填充容器背景并将其提升2.5em，为什么？因为坐标轴的底端（我们将在下一个样式中设置）高度是2.5em。而且坐标轴倾斜了45度，所以右下角有一个空白区域。

坐标轴的X轴样式：

  1. /* X轴 */
  2. .graph-container:before {
  3.   position: absolute;
  4.   content: "";
  5.  
  6.   bottom: 0;
  7.   left: -1.25em; /* 倾斜会将它向左推，所以我们将它向相反的方向移动一点。 */
  8.  
  9.   width: 100%; /* 确保它和整个组件一样宽 */
  10.  
  11.   height: 2.5em;
  12.   background-color: rgba(183, 183, 183, 1);
  13.  
  14.   transform: skew(-45deg);
  15. }复制代码

我们把它倾斜45度，然后向左移动一点，以确保它的位置正确。

坐标轴的Y轴样式：

  1. /* Y轴 */
  2. .graph-container:after {
  3.   position: absolute;
  4.   content: "";
  5.  
  6.   top: 1.25em; /* 倾斜会将其向上推，因此我们将其向下移动一点。 */
  7.   left: 0em;
  8.  
  9.   width: 2.5em;
  10.   background-color: rgba(28, 29, 30, .4);
  11.  
  12.   transform: skew(0deg, -45deg);
  13. }复制代码

这里没什么特别的。一样将元素倾斜45度，然后向下推一点，以便正确定位。

坐标轴的基本设置就是这些，接下来我们继续设置列表项里面的样式：

  1. .graph-container > li {
  2.   float: left; /* 水平排列 */
  3.   position: relative; 
  4. }
  5. .graph-container > li:nth-last-child(2) {
  6.   margin-right: 2.5em;
  7. }
  8. /* X轴的文字标签 */
  9. .graph-container > li > span {
  10.   position: absolute;
  11.   left: 0;
  12.   bottom: -2em;
  13.   width: 80%; 
  14.   text-align: center;
  15.  
  16.   font-size: 1.5em;
  17.   color: rgba(200, 200, 200, .4);
  18. }复制代码

这里有两个要注意的点。首先，我们使用浮动将柱体水平排列。通常情况下都应该非常小心地使用浮动，它会带来高度塌陷等布局问题。所以，在这里你可以尝试变为设置display:inline-block来实现。

第二，我们在最后一个柱体上添加了一些右边距。这样我们就可以确保给坐标轴底部留出足够的空间，试着去掉它，你就会明白我的意思。

OK，我们就快完成了。最后要做的是添加Y轴的文字标记。

  1. /* 文字标记的容器 */
  2. .graph-container > li:last-child {
  3.   width: 100%;
  4.   position: absolute;
  5.   left: 0;
  6.   bottom: 0;
  7. }
  8.  
  9. /* Y轴文字标记列表 */
  10. .graph-marker-container > li {
  11.   position: absolute;
  12.   left: -2.5em;
  13.   bottom: 0;
  14.   width: 100%;
  15.   margin-bottom: 2.5em;
  16.   list-style: none;
  17. }
  18.  
  19. /* Y轴线条常规样式 */
  20. .graph-marker-container > li:before,
  21. .graph-marker-container > li:after {
  22.   content: "";
  23.   position: absolute;
  24.   border-style: none none dotted;
  25.   border-color: rgba(100, 100, 100, .15);
  26.   border-width: 0 0 .15em;
  27.   background: rgba(133, 133, 133, .15);
  28. }
  29.  
  30. /* Y轴侧线 */
  31. .graph-marker-container > li:before {
  32.   width: 3.55em;
  33.   height: 0;
  34.   bottom: -1.22em;
  35.   left: -.55em;
  36.   z-index: 2; 
  37.   transform: rotate(-45deg);
  38. }
  39.  
  40. /* Y轴背景线 */
  41. .graph-marker-container li:after {
  42.   width: 100%;
  43.   bottom: 0;
  44.   left: 2.5em;
  45. }
  46.  
  47. /* Y轴文本标签 */
  48. .graph-marker-container span {
  49.   color: rgba(200, 200, 200, .4);
  50.   position: absolute;
  51.  
  52.   top: 1em;
  53.   left: -3.5em; 
  54.   width: 3.5em; 
  55.  
  56.   font-size: 1.5em;
  57. }复制代码

如您所见，我们将文字标记容器的宽度设置为100%，使得背景线能够覆盖整个坐标轴，使用虚线边框设置Y轴线条的样式并定位span元素，使文字标签位于坐标轴的外侧。使用:before和:after伪元素，可以减少HTML的代码量，让页面保持干净。

到这里，我们已经完成了柱状图的所有样式设置，但是我们缺少一些重要的变量——大小、颜色和条形填充值！上面说过我们的图表是可定制的，所以，我决定不把变量和其他代码混合在一起，这样你就可以更方便的自定义它们了。

  1. /****************
  2.  * 尺寸        *
  3.  ****************/
  4.  /* 图表的整体大小 */
  5. .graph-container,
  6. .bar-container {
  7.   font-size: 8px;
  8. }
  9. /* 柱体的高度 */
  10. .bar-container,
  11. .graph-container:after,
  12. .graph-container > li:last-child {
  13.   height: 40em;
  14. }
  15.  
  16. /****************
  17.  * 间距      *
  18.  ****************/
  19. /* 柱体的间距 */
  20. .graph-container > li .bar-container {
  21.   margin-right: 1.5em;
  22. }
  23. /* 第一个柱体的左边距 */
  24. .graph-container > li:first-child {
  25.   margin-left: 1.5em;
  26. }
  27. /* 最后一个柱体的右边距 */
  28. .graph-container > li:nth-last-child(2) .bar-container {
  29.   margin-right: 1.5em;
  30. }
  31.  
  32. /****************
  33.  *    颜色    *
  34.  ****************/
  35. /* 柱体的背面颜色 */
  36. .bar-background {
  37.   background-color: rgba(160, 160, 160, .1);
  38. }
  39. /* 柱体的底面颜色 */
  40. .bar-background:before {
  41.   background-color: rgba(160, 160, 160, .2);
  42. }
  43. /* 柱体的左后面颜色 */
  44. .bar-background:after {
  45.   background-color: rgba(160, 160, 160, .05);
  46. }
  47. /* 柱体的正面颜色 */
  48. .bar-foreground {
  49.   background-color: rgba(160, 160, 160, .1);
  50. }
  51. /* 内核的颜色 */
  52. .bar-inner,
  53. .bar-inner:before { background-color: rgba(5, 62, 123, .6); }
  54. .bar-inner:after { background-color: rgba(47, 83, 122, .7); }
  55.  
  56. /*************************************
  57.  *   内核的高度                      *
  58.  *************************************/
  59. .graph-container > li:nth-child(1) .bar-inner { height: 25%; bottom: 0; }
  60. .graph-container > li:nth-child(2) .bar-inner { height: 50%; bottom: 0; }
  61. .graph-container > li:nth-child(3) .bar-inner { height: 75%; bottom: 0; }复制代码

在下载的源码中，您将无法找到这一部分代码，因为我在那里做了一些更有趣的事情——我使用了单选按钮让您在不修改代码的情况下使用变量。但是，如果您只需要定制一个静态图形，那么就从上面获取代码片段，并根据您的喜好对其进行定制。

总结
让我们回顾一下文章中介绍的一些CSS规范/技术。

  • transform:skew（）和transform:rotate（）用于倾斜和旋转元素，它们组合起来使元素模拟产生三维立体的效果。
  • :before和:after伪元素可以保持HTML标记相对干净
  • :nth-last-child（）和:not是针对特定列表项的伪类，可以避免向HTML中添加额外的类/id。
  • linear-gradient和background-position一起使用可以实现背景的部分填充
  • rgba（）可以实现具有透明度的颜色
  • border属性可以创建三角形形状


转载于:https://juejin.im/post/5cf079bae51d45108223fc00

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/96805
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号