酷炫的阴影3D进度条:CSS/Sass
Posted 前端大牛爱好者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了酷炫的阴影3D进度条:CSS/Sass相关的知识，希望对你有一定的参考价值。
今天我想给大家分享的是一个关于如何用CSS/Sass创建一些有趣的3D进度条的教程。了解如何使用框阴影和渐变创建逼真的外观皮肤。（源码下载在文章末尾）
我们将向您展示如何创建一些纯CSS进度条与一个特殊的3D外观。考虑本教程的一个高级CSS练习，它将让您深入了解许多有趣的3D属性和着色技术。仅使用CSS创建UI组件将训练您跳出固有思维模式的能力，在本教程中，我们将向您展示如何创建更复杂的形状、如何将其用作进度条和动画。
浏览器支持：Chrome Firefox Internet Explorer Safari Opera
我们将在本教程中使用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应用于框。
所以让我们从初始化一些颜色变量开始来编写样式吧：
1$light-gray: #e0e0e0;
2$magenta: #ec0071;
3$white: #f5f5f5;
4
5.perspective {
6 font-size: 5em; // sets the main scale size
7 perspective: 12em; // sets the perspective
8 perspective-origin: 50% 50%;
9 text-align: center;
10}
11
12.bar {
13 display: inline-block;
14 width: 1em;
15 height: 1em;
16 margin-top: 1em;
17 position: relative;
18 transform: rotateX(60deg); // sets the view point
19 transform-style: preserve-3d; // perspective for the children
20}
现在，我们来看看这些面。如果我们想要能够毫无困难地重新调整我们的主框，里面包含的面必须得像液体一样具有流动行为以及具备绝对位置。
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>
好的，这是一个很棒的立方体，但是我们要为进度条创建一个矩形。如果你还记得的话，我们已经用一种液体化的方法构建了面，所以如果我们只是增加.bar类的width，那么这样就可以。在这个例子中，我们使用了4em的宽度。
构建百分比填充
百分比填充将包含在面内，并且，为了保持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
7 @for $i from 0 to 101 {
8 &[aria-valuenow='#{$i}'] {
9 .percentage:before {
10 width: $i * 1%;
11 }
12 }
13 }
14}
如果你想立竿见影地看到成果，那么只需将HTML中的aria-valuenow属性从0更改至100。
构建皮肤
为了构建皮肤，我们将使用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}
19.bar {
20 // -> The SCSS from before
21 @include build-skin(#57caf4, 'cyan');
22} 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>
这里发生了什么？很简单：当浏览器渲染一个绝对元素时，默认情况下它会添加一个自动递增的z-index（如果我们不编辑此属性的话）。所以，如果我们通过先放置底部的面来改变渲染顺序，那么它的阴影就会覆盖在背面的所有面上。这就是我们实现现实化阴影的原理。
关于如何实现进度条就都在这里了！现在，请查看所有DEMO演示和源代码文件，然后开始构建皮肤来训练自己此技能吧。
感谢各位的阅读，希望本教程能对你有所帮助！
https://tympanus.net/codrops/2015/09/30/shaded-progress-bars-css-sass-excercise/
前端大牛爱好者：每天一篇前端技术文章，不定时前端干货发送
欢迎长按（扫描）二维码关注：前端大牛爱好者
以上是关于酷炫的阴影3D进度条:CSS/Sass的主要内容，如果未能解决你的问题，请参考以下文章