纯CSS炫酷3D旋转立方体进度条特效

02-09 次

标签立方体进度条 3d旋转

在网站制作中，提高用户体验度是一项非常重要的任务。一个创意设计不但能吸引用户的眼球，还能大大的提高用户的体验。在这篇文章中，我们将大胆的将前面所学的3D立方体和进度条结合起来，制作一款纯CSS3的3D旋转立方体进度条效果。

我们先来预览一下效果：

css3 3d旋转进度条

HTML结构

<div class="wrap">
  <div class="cube">
    <div class="front">
      <div class="progress">Loading ...</div>
    </div>
    <div class="back">
      <div class="progress">Loading ...</div>
    </div>
    <div class="top">
      <div class="progress">Loading ...</div>
    </div>
    <div class="bottom">
      <div class="progress">Loading ...</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

这个3D立方体进度条的HTML结构和原来我们讲述的简单3D立方体稍有不同。因为我们还要制作进度条的动画，所以多包装了一层<div>。class为progress的<div>是用于制作进度条动画的，它们位于上下和前后4个面中。当我们设置新的进度条值时，就使用这4个面来制作进度条动画。

CSS样式

.wrap {
  perspective: 1000px;
  perspective-origin: 50% 50%;

  /*  Change this to adjust the 3d bar tilting */
  transform: rotateZ(0.01turn) rotateY(0.01turn);
}
.progress
{
  height: 100%;
  width: 0%;
  padding: 0px;
  transition: width 2s ease;
  
  overflow: visible;
  text-align: center;
  color: #000;
  font-family: verdana;
  font-size: 20px;
  white-space: nowrap;
  line-height: 45px;
  
  border-right: solid 2px #444;
  background-size: 50px 50px;
  /* Blue stripes */
  background-image: linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
  animation: bganim 1s linear 2s infinite;
}
@keyframes bganim {
  to { background-position: 50px;}
}
.cube {
  margin: auto;
  position: relative;
  height: 50px;
  width: 500px;
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
}

.cube > div {
  position: absolute;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  border: solid 1px #eee;
  background-size: 50px 50px;
  /* Grey stripes */
  background-image: linear-gradient(135deg,#ddd 25%,#eee 25%,#eee 50%, #ddd 50%, #ddd 75%,#eee 75%,#eee 100%);
  animation: bganim 1s linear 2s infinite;
}
.cube > .left,.cube > .right{
  height: 50px;
  width: 50px;
}

.front {
  transform: translateZ(25px);
}

.back {
  transform: translateZ(-25px) rotateX(180deg);
}

.top {
  transform: rotateX(-270deg) translateY(-25px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(270deg) translateY(25px);
  transform-origin: bottom center;
}

.left {
  transform: rotateY(270deg) translateX(-25px);
  transform-origin: center left;
}
.right {
  transform: rotateY(-270deg) translateX(25px) translateZ(450px);
  transform-origin: top right;
}

/* Rotating the 3d rectangle */
@keyframes rotate {
  100%{
    transform: rotateX(1turn);
  }
}