前端技术，一个超炫酷带阴影的CSS/Sass 3D进度条

---

今天我们想向大家展示如何创建一些具有特殊3D外观的纯CSS进度条。不妨将本教程当作是一个高级的CSS练习，以更深入地了解更多有趣的3D属性和着色技术。仅使用CSS创建UI组件将训练你的创造性思维，并且在本教程中，我们将通过制作进度条并动画化来向大家展示一些如何创建更复杂形状的技巧。

注意：某些CSS属性仅在现代浏览器中受支持。IE仍然不支持transform-style：preserve-3d，这是一个用于创建嵌套3D结构的关键属性；所以进度条在IE浏览器中将是扁平/无效的。

浏览器支持：Chrome Firefox Internet Explorer Safari Opera

源码下载(http://www.html5tricks.com/jquery-css3-3d-progress-bar.html)

我们将在本教程中使用Sass（与Compass一起使用），因此请确保设置并了解其基础知识：

安装Sass和Sass Basics

安装Compass Stylesheet Authoring Framework和Compass CSS3

如果你想对动画进度条使用完整的解决方案，那么你应该查看Kimmo Brunfeldt的ProgressBar.js或HubSpot的PACE，以获得出色的页面加载进度条。

为了生成所有必要的前缀，你可以使用像Autoprefixer或用于Sublime Text的插件。

我们将使用许多有趣的CSS属性，如transform，perspective和box-shadow。我们还将大量使用SASS，以节省生成进度条的位置和外观所需的很多时间。通过使用相对大小（em，百分比），我们可以确保进度条的大小易于调整。

构建面

我们先从构建一个包含所有六个面的框开始。这个框将作为我们的主要容器，用来设置进度条的尺寸及其视点。我们还将使用一个包装器用于透视图，并且这个包装器的font-size属性将允许使用某些em单位魔法的帮助来扩展进度条。

为了确保所有的面都是我们3D空间的一部分，我们需要将transform-style: preserve-3d应用于框。

所以让我们从初始化一些颜色变量开始来编写样式吧：

$light-gray: #e0e0e0;

$magenta: #ec0071;

$white: #f5f5f5;

.perspective {

  font-size: 5em; // sets the main scale size

  perspective: 12em; // sets the perspective

  perspective-origin: 50% 50%;

  text-align: center;

}

.bar {

  display: inline-block;

  width: 1em;

  height: 1em;

  margin-top: 1em;

  position: relative;

  transform: rotateX(60deg); // sets the view point

  transform-style: preserve-3d; // perspective for the children

}

现在，我们来看看这些面。如果我们想要能够毫无困难地重新调整我们的主框，里面包含的面必须得像液体一样具有流动行为以及具备绝对位置。

.bar {

  // -> The SCSS written before

  .bar-face {

    display: inline-block;

    width: 100%;

    height: 100%;

    position: absolute;

    bottom: 0;

    left: 0;

    background-color: rgba($light-gray, .6); // just to see what is happening

  }

}

写标记并且确保它是可以访问的：

 

   

    

    

    

    

    

 

如果你有兴趣了解更多有关可访问性的信息，这篇文章（由Gez Lemon撰写）帮助我了很多：‘Introduction to WAI ARIA’

设置面

这是非常重要的一部分。进度条的面必须准确定向，这样当我们开始添加百分比填充时，就不会陷入困境。

.bar {

// -> The SCSS from before

.bar-face {

// -> The SCSS from before

transform-origin: 50% 100%;

&.roof {

transform: translateZ(1em);

}

&.front {

transform: rotateX(-90deg);

}

&.right {

left: auto;

right: -.5em;

width: 1em;

transform: rotateX(-90deg) rotateY(90deg) translateX(.5em);

}

&.back {

transform: rotateX(-90deg) rotateY(0deg) translateZ(-1em);

}

&.left {

width: 1em;

transform: rotateX(-90deg)rotateY(-90deg) translateX(-.5em) translateZ(.5em);

}

}

}