纯CSS炫酷3D旋转立方体进度条特效_html/css_WEB-ITnose

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

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