关灯
开启左侧

一个超炫酷带阴影的CSS 3D进度条

[复制链接]
飞舟 发表于 2018-11-26 09:20:37 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 

今天我们想向大家展示如何创建一些具有特殊3D外观的纯CSS进度条。不妨将本教程当作是一个高级的CSS练习,以更深入地了解更多有趣的3D属性和着色技术。仅使用CSS创建UI组件将训练你的创造性思维,并且在本教程中,我们将通过制作进度条并动画化来向大家展示一些如何创建更复杂形状的技巧。
我们将使用许多有趣的CSS属性,如transform,perspective和box-shadow。我们还将大量使用SASS,以节省生成进度条的位置和外观所需的很多时间。通过使用相对大小(em,百分比),我们可以确保进度条的大小易于调整。
我们先从构建一个包含所有六个面的框开始。这个框将作为我们的主要容器,用来设置进度条的尺寸及其视点。我们还将使用一个包装器用于透视图,并且这个包装器的font-size属性将允许使用某些em单位魔法的帮助来扩展进度条。
为了确保所有的面都是我们3D空间的一部分,我们需要将transform-style: preserve-3d应用于框。
所以让我们从初始化一些颜色变量开始来编写样式吧:
  1. $light-gray: #e0e0e0;
  2. $magenta: #ec0071;
  3. $white: #f5f5f5;

  4. .perspective {
  5.         font-size: 5em; // sets the main scale size
  6.         perspective: 12em; // sets the perspective
  7.         perspective-origin: 50% 50%;
  8.         text-align: center;
  9. }

  10. .bar {
  11.         display: inline-block;
  12.         width: 1em;
  13.         height: 1em;
  14.         margin-top: 1em;
  15.         position: relative;
  16.         transform: rotateX(60deg); // sets the view point
  17.         transform-style: preserve-3d; // perspective for the children
  18. }
复制代码
现在,我们来看看这些面。如果我们想要能够毫无困难地重新调整我们的主框,里面包含的面必须得像液体一样具有流动行为以及具备绝对位置。
  1. .bar {
  2.         // -> The SCSS written before
  3.         .bar-face {
  4.                 display: inline-block;
  5.                 width: 100%;
  6.                 height: 100%;
  7.                 position: absolute;
  8.                 bottom: 0;
  9.                 left: 0;
  10.                 background-color: rgba($light-gray, .6); // just to see what is happening
  11.         }
  12. }
复制代码
写标记并且确保它是可以访问的:
  1. <div class="perspective">
  2.         <div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  3.                 <div class="bar-face"></div>
  4.                 <div class="bar-face"></div>
  5.                 <div class="bar-face"></div>
  6.                 <div class="bar-face"></div>
  7.                 <div class="bar-face"></div>
  8.                 <div class="bar-face"></div>
  9.         </div>
  10. </div>
复制代码
这是非常重要的一部分。进度条的面必须准确定向,这样当我们开始添加百分比填充时,就不会陷入困境。
  1. .bar {
  2.         // -> The SCSS from before
  3.         .bar-face {
  4.                 // -> The SCSS from before
  5.                 transform-origin: 50% 100%;
  6.                 &.roof {
  7.                         transform: translateZ(1em);
  8.                 }
  9.                 &.front {
  10.                         transform: rotateX(-90deg);
  11.                 }
  12.                 &.right {
  13.                         left: auto;
  14.                         right: -.5em;
  15.                         width: 1em;
  16.                         transform: rotateX(-90deg) rotateY(90deg) translateX(.5em);
  17.                 }
  18.                 &.back {
  19.                         transform: rotateX(-90deg) rotateY(0deg) translateZ(-1em);
  20.                 }
  21.                 &.left {
  22.                         width: 1em;
  23.                         transform: rotateX(-90deg)rotateY(-90deg) translateX(-.5em) translateZ(.5em);
  24.                 }
  25.         }
  26. }
复制代码
  1. <div class="perspective">
  2.         <div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  3.                 <div class="bar-face roof"></div>
  4.                 <div class="bar-face front"></div>
  5.                 <div class="bar-face left"></div>
  6.                 <div class="bar-face right"></div>
  7.                 <div class="bar-face back"></div>
  8.                 <div class="bar-face floor"></div>
  9.         </div>
  10. </div>
复制代码
百分比填充将包含在面内,并且,为了保持HTML代码的最小化,我们将使用伪类:before。这样生成的:before元素将显示相对于面宽度的百分比。
  1. .bar {
  2.         // -> The SCSS from before
  3.         .bar-face {
  4.                 // -> The SCSS from before
  5.                 &.percentage:before {
  6.                         content: '';
  7.                         display: block;
  8.                         position: absolute;
  9.                         bottom: 0;
  10.                         width: 0;
  11.                         height: 100%;
  12.                         margin: 0;
  13.                         background-color: rgba($magenta, .8);
  14.                         transition: width .6s ease-in-out;
  15.                 }
  16.         }
  17. }
复制代码
  1. <div class="perspective">
  2.         <div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  3.                 <div class="bar-face roof percentage"></div>
  4.                 <div class="bar-face front percentage"></div>
  5.                 <div class="bar-face left"></div>
  6.                 <div class="bar-face right"></div>
  7.                 <div class="bar-face back percentage"></div>
  8.                 <div class="bar-face floor percentage"></div>
  9.         </div>
  10. </div>
复制代码
现在我们需要编写百分比填充样式。手动编写一百个类将会非常繁琐,所以让我们写一些可靠的循环来从HTML中获取aria-valuenow属性的所有值。
  1. .bar {
  2.         // -> The SCSS from before
  3.         .bar-face {
  4.                 // -> The SCSS from before
  5.         }

  6.         @for $i from 0 to 101 {
  7.                 &[aria-valuenow='#{$i}'] {
  8.                         .percentage:before {
  9.                 width: $i * 1%;
  10.                         }
  11.                 }
  12.         }
  13. }
复制代码
为了构建皮肤,我们将使用Sass mixins。为了得到一个现实化的外观,我们将使用box-shadow属性。这个属性支持一个数组的值,并且这个数组将允许我们模拟照明。我们将在这个属性中包含地面阴影和面的采光。
  1. @mixin build-skin($color, $name) {
  2.         &.#{$name} {
  3.                 .floor {
  4.                         box-shadow:
  5.                                 0 -0.2em 1em rgba(0,0,0,.15),
  6.                                 0 0.2em 0.1em -5px rgba(0,0,0,.3),
  7.                                 0 -0.75em 1.75em rgba($white,.6);
  8.                 }
  9.                 .left {
  10.                         background-color: rgba($color, .5);
  11.                 }
  12.                 .percentage:before {
  13.                         background-color: rgba($color, .5);
  14.                         box-shadow: 0 1.6em 3em rgba($color,.25);
  15.                 }

  16.         }
  17. }
  18. .bar {
  19.         // -> The SCSS from before
  20.         @include build-skin(#57caf4, 'cyan');
  21. }
复制代码
  1. <div class="perspective">
  2.         <div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  3.                 <div class="bar-face roof percentage"></div>
  4.                 <div class="bar-face front percentage"></div>
  5.                 <div class="bar-face left"></div>
  6.                 <div class="bar-face right"></div>
  7.                 <div class="bar-face back percentage"></div>
  8.                 <div class="bar-face floor percentage"></div>
  9.         </div>
  10. </div>
复制代码
此外,我们需要一个照亮面的技巧。如果我们以正确的顺序输入面的DOM节点,我们将看到奇迹:
  1. <div class="perspective">
  2.         <div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  3.                 <div class="bar-face roof percentage"></div>
  4.                 <div class="bar-face back percentage"></div>
  5.                 <div class="bar-face floor percentage"></div>
  6.                 <div class="bar-face left"></div>
  7.                 <div class="bar-face right"></div>
  8.                 <div class="bar-face front percentage"></div>
  9.         </div>
  10. </div>
复制代码




 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )