当前位置:   article > 正文

CSS3实现柱状图的3D立体动画效果_css bar 立体 效果

css bar 立体 效果

在这里插入图片描述

实现的柱状图应该是:

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

挑战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. bottom: 0;
  17. right: 0;
  18. width: 0;
  19. height: 0;
  20. border-style: solid;
  21. border-width: 0 0 2.5em 2.5em;
  22. border-color: transparent transparent rgba(183,183,183,1);
  23. }

注意,我们将.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. .bar-background:before,
  11. .bar-background:after {
  12. content: "";
  13. position: absolute;
  14. }
  15. /* 底面 */
  16. .bar-background:before {
  17. bottom: -2.5em;
  18. right: 1.25em;
  19. width: 10em;
  20. height: 2.5em;
  21. transform: skew(-45deg);
  22. }
  23. /* 左后面 */
  24. .bar-background:after {
  25. top: 1.25em;
  26. right: 10em;
  27. width: 2.5em;
  28. height: 100%;
  29. /* 仅倾斜Y轴 */
  30. transform: skew(0deg, -45deg);
  31. }

如你所见,我们将.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. .bar-foreground:before,
  14. .bar-foreground:after,
  15. .bar-inner:before,
  16. .bar-inner:after {
  17. content: "";
  18. position: absolute;
  19. }
  20. /* 右前面 */
  21. .bar-foreground:before,
  22. .bar-inner:before {
  23. top: -1.25em;
  24. right: -2.5em;
  25. width: 2.5em;
  26. height: 100%;
  27. background-color: rgba(160, 160, 160, .27);
  28. transform: skew(0deg, -45deg);
  29. }
  30. /* 前面 */
  31. .bar-foreground:after,
  32. .bar-inner:after {
  33. top: -2.5em;
  34. right: -1.25em;
  35. width: 100%;
  36. height: 2.5em;
  37. background-color: rgba(160, 160, 160, .2);
  38. transform: skew(-45deg);
  39. }

一切都和.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. transition: height 1s linear, bottom 1s linear;
  9. }
  10. /* 右面 */
  11. .bar-inner:before {
  12. background-color: rgba(5, 62, 123, .6);
  13. }
  14. /* 上面 */
  15. .bar-inner:after {
  16. background-color: rgba(47, 83, 122, .7);
  17. }

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

挑战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轴标签。

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

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

我们把它倾斜45度,然后向左移动一点,以确保它的位置正确。
坐标轴的Y轴样式:

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

一样将元素倾斜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. font-size: 1.5em;
  16. color: rgba(200, 200, 200, .4);
  17. }

这里有两个要注意的点。首先,我们使用浮动将柱体水平排列。通常情况下都应该非常小心地使用浮动,它会带来高度塌陷等布局问题。所以,在这里你可以尝试变为设置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. /* Y轴文字标记列表 */
  9. .graph-marker-container > li {
  10. position: absolute;
  11. left: -2.5em;
  12. bottom: 0;
  13. width: 100%;
  14. margin-bottom: 2.5em;
  15. list-style: none;
  16. }
  17. /* Y轴线条常规样式 */
  18. .graph-marker-container > li:before,
  19. .graph-marker-container > li:after {
  20. content: "";
  21. position: absolute;
  22. border-style: none none dotted;
  23. border-color: rgba(100, 100, 100, .15);
  24. border-width: 0 0 .15em;
  25. background: rgba(133, 133, 133, .15);
  26. }
  27. /* Y轴侧线 */
  28. .graph-marker-container > li:before {
  29. width: 3.55em;
  30. height: 0;
  31. bottom: -1.22em;
  32. left: -.55em;
  33. z-index: 2;
  34. transform: rotate(-45deg);
  35. }
  36. /* Y轴背景线 */
  37. .graph-marker-container li:after {
  38. width: 100%;
  39. bottom: 0;
  40. left: 2.5em;
  41. }
  42. /* Y轴文本标签 */
  43. .graph-marker-container span {
  44. color: rgba(200, 200, 200, .4);
  45. position: absolute;
  46. top: 1em;
  47. left: -3.5em;
  48. width: 3.5em;
  49. font-size: 1.5em;
  50. }

如你所见,我们将文字标记容器的宽度设置为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. .graph-container > li .bar-container {
  20. margin-right: 1.5em;
  21. }
  22. /* 第一个柱体的左边距 */
  23. .graph-container > li:first-child {
  24. margin-left: 1.5em;
  25. }
  26. /* 最后一个柱体的右边距 */
  27. .graph-container > li:nth-last-child(2) .bar-container {
  28. margin-right: 1.5em;
  29. }
  30. /****************
  31. * 颜色 *
  32. ****************/
  33. /* 柱体的背面颜色 */
  34. .bar-background {
  35. background-color: rgba(160, 160, 160, .1);
  36. }
  37. /* 柱体的底面颜色 */
  38. .bar-background:before {
  39. background-color: rgba(160, 160, 160, .2);
  40. }
  41. /* 柱体的左后面颜色 */
  42. .bar-background:after {
  43. background-color: rgba(160, 160, 160, .05);
  44. }
  45. /* 柱体的正面颜色 */
  46. .bar-foreground {
  47. background-color: rgba(160, 160, 160, .1);
  48. }
  49. /* 内核的颜色 */
  50. .bar-inner,
  51. .bar-inner:before { background-color: rgba(5, 62, 123, .6); }
  52. .bar-inner:after { background-color: rgba(47, 83, 122, .7); }
  53. /*************************************
  54. * 内核的高度 *
  55. *************************************/
  56. .graph-container > li:nth-child(1) .bar-inner { height: 25%; bottom: 0; }
  57. .graph-container > li:nth-child(2) .bar-inner { height: 50%; bottom: 0; }
  58. .graph-container > li:nth-child(3) .bar-inner { height: 75%; bottom: 0; }

总结

源码下载地址:https://download.csdn.net/download/yuan_jlj/13696000
原文:https://mp.weixin.qq.com/s/dy8SFN_Rb48z4vluYIgVMw
让我们回顾一下文章中介绍的一些CSS规范/技术。

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

 

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号