CSS/Sass制作3D立方体进度条特效

PetitQ 其他代码 2019-1-25 2.05K 0 2

这是一组通过纯 CSS3/Sass 制作的效果非常炫酷的 3D 立方体进度条特效。这组特效中展示了如何使用盒子阴影和渐变来制作各种不同效果的 3D 立方体进度条皮肤效果。该 3D 立方体进度条的 UI 使用纯 CSS 制作，由于使用的都是一些比较新的 CSS3 属性，所以要得到最佳体验效果必须使用最新版本的现代浏览器。由于 IE 浏览器不支持 transform-style: preserve-3d 属性，该属性用于制作立方体效果，所以在 IE 浏览器中是看不到进度条的立方体效果的。

使用方法

该 3D 立方体进度条的 HTML 结构采用立方体的基本结构：

也想出现在这里？联系我们吧

```
<div class="perspective">
```

  <div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">

```
    <div class="bar-face"></div>
```
```
    <div class="bar-face"></div>
```
```
    <div class="bar-face"></div>
```
```
    <div class="bar-face"></div>
```
```
    <div class="bar-face"></div>
```
```
    <div class="bar-face"></div>
```
```
  </div>
```
```
</div>
```

注意这里的代码使用 Sass 来编写。首先需要设置一些变量和初始样式。

```
$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

```
  }
```
```
}
```

设置立方体

设置立方体的各个面的工作实际是在制作一个立方体，需要为各个面指定一个 class 类。

```
<div class="perspective">
```

  <div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">

```
    <div class="bar-face roof"></div>
```
```
    <div class="bar-face front"></div>
```
```
    <div class="bar-face left"></div>
```
```
    <div class="bar-face right"></div>
```
```
    <div class="bar-face back"></div>
```
```
    <div class="bar-face floor"></div>
```
```
  </div>
```
```
</div>
```

```
.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);

```
    }
```
```
  }
```
```
}
```

通过上面的代码，我们可以制作出一个立方体，但是我们需要的是一个矩形的立方体，我们只需要增加.bar class 的宽度即可制作出矩形立方体的效果。在这个例子中，宽度被设置为 4em，得到如下图的效果：

矩形立方体

创建百分比填充效果，进度条的百分比填充效果包含在立方体的各个面内，为了使 HTML 代码最小化，这里使用:before 伪元素来制作百分比填充效果。这个有:before 伪元素制作的百分比填充效果将根据它们各自的面的宽度来增长显示百分比。

```
<div class="perspective">
```

  <div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">

    <div class="bar-face roof percentage"></div>

    <div class="bar-face front percentage"></div>

```
    <div class="bar-face left"></div>
```
```
    <div class="bar-face right"></div>
```

    <div class="bar-face back percentage"></div>

    <div class="bar-face floor percentage"></div>

```
  </div>
```
```
</div>
```

```
.bar {
```
```
  // -> The SCSS from before
```
```
  .bar-face {
```
```
    // -> The SCSS from before
```
```
    &.percentage:before {
```
```
      content: '';
```
```
      display: block;
```
```
      position: absolute;
```
```
      bottom: 0;
```
```
      width: 0;
```
```
      height: 100%;
```
```
      margin: 0;
```

      background-color: rgba($magenta, .8);

      transition: width .6s ease-in-out;

```
    }
```
```
  }
```
```
}
```

接下来需要做的事情是设置百分比填充的样式。如果使用手动来编写 100 次填充样式（每增加 1%要写一个对应的 class）是一件非常乏味的工作。这里使用 Sass 来制作一个循环，从各个进度条的 HTML 代码中获取 aria-valuenow 的值。

```
.bar {
```
```
  // -> The SCSS from before
```
```
  .bar-face {
```
```
    // -> The SCSS from before
```
```
  }
```
```
 
```
```
  @for $i from 0 to 101 {
```
```
    &[aria-valuenow='#{$i}'] {
```
```
      .percentage:before {
```
```
                width: $i * 1%;
```
```
      }
```
```
    }
```
```
  }
```
```
}
```

因此，如果我们将 HTML 代码中的 aria-valuenow 属性的值从 0 变化到 100，进度条将产生动画效果。

创建皮肤

为了创建各种不同的进度条皮肤效果，这里使用了 Sass mixins。这里制作皮肤使用到的是 box-shadow 属性。这个属性支持使用一个数组值，通过数组我们可以模拟照明发光效果。在这个数组中包含了底部阴影和面的发光效果。

```
<div class="perspective">
```

  <div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">

    <div class="bar-face roof percentage"></div>

    <div class="bar-face front percentage"></div>

```
    <div class="bar-face left"></div>
```
```
    <div class="bar-face right"></div>
```

    <div class="bar-face back percentage"></div>

    <div class="bar-face floor percentage"></div>

```
  </div>
```
```
</div>
```

```
@mixin build-skin($color, $name) {
```
```
  &.#{$name} {
```
```
    .floor {
```
```
      box-shadow:
```
```
        0 -0.2em 1em rgba(0,0,0,.15),
```

        0 0.2em 0.1em -5px rgba(0,0,0,.3),

        0 -0.75em 1.75em rgba($white,.6);

```
    }
```
```
    .left {
```

      background-color: rgba($color, .5);

```
    }
```
```
    .percentage:before {
```

      background-color: rgba($color, .5);

      box-shadow: 0 1.6em 3em rgba($color,.25);

```
    }
```
```
 
```
```
  }
```
```
}
```
```
.bar {
```
```
  // -> The SCSS from before
```
```
  @include build-skin(#57caf4, 'cyan');
```
```
}
```

在上图中可以看到，百分比填充应该要放置在立方体底面的前面，以遮住底面。通过简单的调整一下立方体 HTML 代码中各个面的顺序，就可以实现这个效果。

```
<div class="perspective">
```

  <div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">

    <div class="bar-face roof percentage"></div>

    <div class="bar-face back percentage"></div>

    <div class="bar-face floor percentage"></div>

```
    <div class="bar-face left"></div>
```
```
    <div class="bar-face right"></div>
```

    <div class="bar-face front percentage"></div>

```
  </div>
```
```
</div>
```

产生这种效果的原因是浏览器在渲染绝对定位的元素的时候，默认会为它们添加一个 z-index 属性（如果我们没有设置属性），所以当我们改变了渲染的顺序，然底面先渲染，它的阴影将会在所有的其他面的下面。

CSS/Sass 制作 3D 立方体进度条特效

已有 512 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

CSS/Sass制作3D立方体进度条特效

使用方法

设置立方体

矩形立方体

创建皮肤

CSS/Sass 制作 3D 立方体进度条特效

相关文章

可视化CSS3渐变背景颜色代码生成

基于moment日期选择器jQuery插件

基于WEBGL的3D立方体特效

发表回复取消回复

热销模板

其他代码

使用方法

设置立方体

矩形立方体

创建皮肤

CSS/Sass 制作 3D 立方体进度条特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复