酷炫的阴影3D进度条：CSS/Sass

今天我想给大家分享的是一个关于如何用CSS/Sass创建一些有趣的3D进度条的教程。了解如何使用框阴影和渐变创建逼真的外观皮肤。（源码下载在文章末尾）

我们将向您展示如何创建一些纯CSS进度条与一个特殊的3D外观。考虑本教程的一个高级CSS练习，它将让您深入了解许多有趣的3D属性和着色技术。仅使用CSS创建UI组件将训练您跳出固有思维模式的能力，在本教程中，我们将向您展示如何创建更复杂的形状、如何将其用作进度条和动画。

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

浏览器支持：ChromeFirefoxInternetExplorerSafariOpera

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

安装Sass和Sass基础

安装Compass样式表创作框架和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应用于框。

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

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

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

设置面

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

好的，这是一个很棒的立方体，但是我们要为进度条创建一个矩形。如果你还记得的话，我们已经用一种液体化的方法构建了面，所以如果我们只是增加.bar类的width，那么这样就可以。在这个例子中，我们使用了4em的宽度。

构建百分比填充

百分比填充将包含在面内，并且，为了保持HTML代码的最小化，我们将使用伪类:before。这样生成的:before元素将显示相对于面宽度的百分比。

现在我们需要编写百分比填充样式。手动编写一百个类将会非常繁琐，所以让我们写一些可靠的循环来从HTML中获取aria-valuenow属性的所有值。

如果你想立竿见影地看到成果，那么只需将HTML中的aria-valuenow属性从0更改至100。

构建皮肤

为了构建皮肤，我们将使用Sass mixins。为了得到一个现实化的外观，我们将使用box-shadow属性。这个属性支持一个数组的值，并且这个数组将允许我们模拟照明。我们将在这个属性中包含地面阴影和面的采光。

此外，我们需要一个照亮面的技巧。如果我们以正确的顺序输入面的DOM节点，我们将看到奇迹：

这里发生了什么？很简单：当浏览器渲染一个绝对元素时，默认情况下它会添加一个自动递增的z-index（如果我们不编辑此属性的话）。所以，如果我们通过先放置底部的面来改变渲染顺序，那么它的阴影就会覆盖在背面的所有面上。这就是我们实现现实化阴影的原理。

关于如何实现进度条就都在这里了！现在，请查看所有DEMO演示和源代码文件，然后开始构建皮肤来训练自己此技能吧。

感谢各位的阅读，希望本教程能对你有所帮助！

原文地址：

https://tympanus.net/codrops/2015/09/30/shaded-progress-bars-css-sass-excercise/

翻译作者：小峰

有你想看的精彩

感谢您的阅读，如果你觉得我的公众号还不错，请多帮我推荐给你的朋友，多谢了。

前端大牛爱好者：每天一篇前端技术文章，不定时前端干货发送