纯CSS 3D立方体加载动画

下载代码

html

css

分享到微信朋友圈

html

css

body {
  margin: 0;
  height: 100vh;
  perspective: 32em;
  background: whitesmoke;
}

div {
  position: absolute;
  transform-style: preserve-3d;
}

.assembly {
  top: 50%;
  left: 50%;
  transform: rotateX(-45deg) rotateY(-45deg);
}

.comp-3d {
  animation: r 2s ease-in-out infinite;
}
.comp-3d--i {
  animation-name: ri;
}
.comp-3d--o {
  animation-name: ro;
}

@keyframes ri {
  0%, 20% {
    transform: rotateY(-0.5turn);
  }
  50% {
    transform: none;
  }
  100%, 80% {
    transform: rotateX(-0.5turn);
  }
}
@keyframes ro {
  0%, 35% {
    transform: rotate(-0.5turn);
  }
  65%, 100% {
    transform: none;
  }
}
.pos:nth-child(1) {
  transform: scale3d(1, 1, 1) translate3d(4em, 4em, 4em);
}

:not(.pos) > .cube:nth-child(1) {
  transform: translate3d(-4em, -4em, 0em);
}

.pos:nth-child(2) {
  transform: scale3d(1, 1, -1) translate3d(4em, 4em, 4em);
}

:not(.pos) > .cube:nth-child(2) {
  transform: translate3d(-4em, 0em, -4em);
}

:not(.pos) > .cube:nth-child(3) {
  transform: translate3d(-4em, 0em, 0em);
}

:not(.pos) > .cube:nth-child(4) {
  transform: translate3d(-4em, 0em, 4em);
}

.pos:nth-child(3) {
  transform: scale3d(1, -1, 1) translate3d(4em, 4em, 4em);
}

:not(.pos) > .cube:nth-child(5) {
  transform: translate3d(-4em, 4em, 0em);
}

.pos:nth-child(4) {
  transform: scale3d(1, -1, -1) translate3d(4em, 4em, 4em);
}

:not(.pos) > .cube:nth-child(6) {
  transform: translate3d(0em, -4em, -4em);
}

:not(.pos) > .cube:nth-child(7) {
  transform: translate3d(0em, -4em, 0em);
}

:not(.pos) > .cube:nth-child(8) {
  transform: translate3d(0em, -4em, 4em);
}

:not(.pos) > .cube:nth-child(9) {
  transform: translate3d(0em, 0em, -4em);
}

:not(.pos) > .cube:nth-child(10) {
  transform: translate3d(0em, 0em, 0em);
}

:not(.pos) > .cube:nth-child(11) {
  transform: translate3d(0em, 0em, 4em);
}

:not(.pos) > .cube:nth-child(12) {
  transform: translate3d(0em, 4em, -4em);
}

:not(.pos) > .cube:nth-child(13) {
  transform: translate3d(0em, 4em, 0em);
}

:not(.pos) > .cube:nth-child(14) {
  transform: translate3d(0em, 4em, 4em);
}

.pos:nth-child(5) {
  transform: scale3d(-1, 1, 1) translate3d(4em, 4em, 4em);
}

:not(.pos) > .cube:nth-child(15) {
  transform: translate3d(4em, -4em, 0em);
}

.pos:nth-child(6) {
  transform: scale3d(-1, 1, -1) translate3d(4em, 4em, 4em);
}

:not(.pos) > .cube:nth-child(16) {
  transform: translate3d(4em, 0em, -4em);
}

:not(.pos) > .cube:nth-child(17) {
  transform: translate3d(4em, 0em, 0em);
}

:not(.pos) > .cube:nth-child(18) {
  transform: translate3d(4em, 0em, 4em);
}

.pos:nth-child(7) {
  transform: scale3d(-1, -1, 1) translate3d(4em, 4em, 4em);
}

:not(.pos) > .cube:nth-child(19) {
  transform: translate3d(4em, 4em, 0em);
}

.pos:nth-child(8) {
  transform: scale3d(-1, -1, -1) translate3d(4em, 4em, 4em);
}

.pos .cube {
  animation: m 2s ease-out infinite;
}
.cube__face {
  margin: -2em;
  width: 4em;
  height: 4em;
  box-shadow: 0 0 2em rgba(220, 220, 220, 0.5) inset;
  background: whitesmoke;
}
.cube__face:nth-child(2n) {
  filter: brightness(0.97);
}
.cube__face:nth-child(n + 5) {
  filter: brightness(1.03);
}
.cube__face:nth-child(1) {
  transform: rotateY(0deg) translateZ(2em);
}
.cube__face:nth-child(2) {
  transform: rotateY(90deg) translateZ(2em);
}
.cube__face:nth-child(3) {
  transform: rotateY(180deg) translateZ(2em);
}
.cube__face:nth-child(4) {
  transform: rotateY(270deg) translateZ(2em);
}
.cube__face:nth-child(5) {
  transform: rotateX(90deg) translateZ(2em);
}
.cube__face:nth-child(6) {
  transform: rotateX(-90deg) translateZ(2em);
}

@keyframes m {
  0%, 5%, 95%, 100% {
    transform: none;
  }
  15% {
    transform: translate3d(0, 4em, 0);
  }
  25% {
    transform: translate3d(0, 4em, 4em);
  }
  35%, 65% {
    transform: translate3d(4em, 4em, 4em);
  }
  75% {
    transform: translate3d(4em, 0, 4em);
  }
  85% {
    transform: translate3d(4em, 0, 0);
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg