纯 CSS 3D

下载代码

html

css

分享到微信朋友圈

html

css

html {
  overflow: hidden;
}

body {
  background: #1f0036;
}

div, :after {
  position: absolute;
}

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

.assembly {
  top: 50%;
  left: 50%;
  transform: rotateX(55deg) rotate(-45deg) translateZ(-5em) scale3d(0.5, 0.5, 0.5);
}

.mov {
  animation: mov 1.75s linear infinite;
}

.bar {
  animation: inherit;
  animation-timing-function: ease-out;
}
.bar:nth-child(1) {
  z-index: -24;
  margin: -12em 12em;
  animation-name: mov1;
}
@keyframes mov1 {
  0%, 10% {
    transform: none;
  }
  19.6875%, 100% {
    transform: translateZ(10em);
  }
}
.bar:nth-child(2) {
  z-index: -18;
  margin: -6em 12em;
  animation-name: mov2;
}
@keyframes mov2 {
  0%, 14.6875% {
    transform: none;
  }
  24.375%, 100% {
    transform: translateZ(10em);
  }
}
.bar:nth-child(3) {
  z-index: -13;
  margin: 0em 12em;
  animation-name: mov3;
}
@keyframes mov3 {
  0%, 19.375% {
    transform: none;
  }
  29.0625%, 100% {
    transform: translateZ(10em);
  }
}
.bar:nth-child(4) {
  z-index: -7;
  margin: 6em 12em;
  animation-name: mov4;
}
@keyframes mov4 {
  0%, 24.0625% {
    transform: none;
  }
  33.75%, 100% {
    transform: translateZ(10em);
  }
}
.bar:nth-child(5) {
  z-index: 0;
  margin: 12em 12em;
  animation-name: mov5;
}
@keyframes mov5 {
  0%, 28.75% {
    transform: none;
  }
  38.4375%, 100% {
    transform: translateZ(10em);
  }
}
.bar:nth-child(6) {
  z-index: 6;
  margin: 12em 6em;
  animation-name: mov6;
}
@keyframes mov6 {
  0%, 33.4375% {
    transform: none;
  }
  43.125%, 100% {
    transform: translateZ(10em);
  }
}
.bar:nth-child(7) {
  z-index: 12;
  margin: 12em 0em;
  animation-name: mov7;
}
@keyframes mov7 {
  0%, 38.125% {
    transform: none;
  }
  47.8125%, 100% {
    transform: translateZ(10em);
  }
}
.bar:nth-child(8) {
  z-index: 18;
  margin: 12em -6em;
  animation-name: mov8;
}
@keyframes mov8 {
  0%, 42.8125% {
    transform: none;
  }
  52.5%, 100% {
    transform: translateZ(10em);
  }
}
.bar:nth-child(9) {
  z-index: 24;
  margin: 12em -12em;
  animation-name: mov9;
}
@keyframes mov9 {
  0%, 47.5% {
    transform: none;
  }
  57.1875%, 100% {
    transform: translateZ(10em);
  }
}
.bar:nth-child(10) {
  z-index: 18;
  margin: 6em -12em;
  animation-name: mov10;
}
@keyframes mov10 {
  0%, 52.1875% {
    transform: none;
  }
  61.875%, 100% {
    transform: translateZ(10em);
  }
}
.bar:nth-child(11) {
  z-index: 12;
  margin: 0em -12em;
  animation-name: mov11;
}
@keyframes mov11 {
  0%, 56.875% {
    transform: none;
  }
  66.5625%, 100% {
    transform: translateZ(10em);
  }
}
.bar:nth-child(12) {
  z-index: 6;
  margin: -6em -12em;
  animation-name: mov12;
}
@keyframes mov12 {
  0%, 61.5625% {
    transform: none;
  }
  71.25%, 100% {
    transform: translateZ(10em);
  }
}
.bar:nth-child(13) {
  z-index: 0;
  margin: -12em -12em;
  animation-name: mov13;
}
@keyframes mov13 {
  0%, 66.25% {
    transform: none;
  }
  75.9375%, 100% {
    transform: translateZ(10em);
  }
}
.bar:nth-child(14) {
  z-index: -6;
  margin: -12em -6em;
  animation-name: mov14;
}
@keyframes mov14 {
  0%, 70.9375% {
    transform: none;
  }
  80.625%, 100% {
    transform: translateZ(10em);
  }
}
.bar:nth-child(15) {
  z-index: -12;
  margin: -12em 0em;
  animation-name: mov15;
}
@keyframes mov15 {
  0%, 75.625% {
    transform: none;
  }
  85.3125%, 100% {
    transform: translateZ(10em);
  }
}
.bar:nth-child(16) {
  z-index: -18;
  margin: -12em 6em;
  animation-name: mov16;
}
@keyframes mov16 {
  0%, 80.3125% {
    transform: none;
  }
  90%, 100% {
    transform: translateZ(10em);
  }
}
.bar__face {
  margin: -10em -2em;
  width: 4em;
  height: 20em;
  background: #bcbcbc;
}
.bar__face:nth-child(-n + 2):after {
  width: inherit;
  height: inherit;
  background: linear-gradient(#1f0036 16%, rgba(31, 0, 54, 0));
  content: '';
}
.bar__face:nth-child(1) {
  transform: rotateX(90deg) rotateY(-90deg) translateZ(2em);
  box-shadow: inset 2px -2px 8px #ddd;
}
.bar__face:nth-child(2) {
  transform: rotateX(90deg) rotateY(-180deg) translateZ(2em);
  box-shadow: inset -2px -2px 8px #ddd;
}
.bar__face:last-child {
  margin-top: -2em;
  height: 4em;
  transform: translateZ(10em);
  box-shadow: inset 2px -2px 8px #ddd;
  background: lightgray;
}

@keyframes mov {
  0% {
    transform: translateZ(10em);
  }
}

JavaScript

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