纯Css 3d统计图

下载代码

html

css

分享到微信朋友圈

html

css

body {
  overflow: hidden;
  margin: 0;
  height: 100vh;
  perspective: 65em;
  perspective-origin: 50% calc(50% - 24em);
  background: #000;
}

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.assembly {
  transform: rotateY(0deg) translate3d(24em, -24em, 30em);
  animation: move 13s ease-in-out infinite;
}

@keyframes move {
  80%, 100% {
    transform: rotateY(-45deg) translate3d(-24em, 3em, -6em);
  }
}
.plane {
  margin: -100vmax;
  width: 200vmax;
  height: 200vmax;
  transform: rotateX(90deg) translateZ(-12em);
  background: radial-gradient(rgba(0, 0, 0, 0) 50%, #000000 71%), linear-gradient(rgba(252, 249, 216, 0.1) 0.125em, transparent 0), linear-gradient(90deg, rgba(252, 249, 216, 0.1) 0.125em, transparent 0);
  background-position: 50% 50%;
  background-size: 100%, 3em 3em, 3em 3em;
}

.bar {
  transform-origin: 0 12em 0;
}
.bar:nth-child(1) {
  margin-left: -18em;
  animation: grow-1 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(1) .face:nth-child(1) {
  -webkit-filter: brightness(0.6);
  filter: brightness(0.6);
}
.bar:nth-child(1) .face:nth-child(2) {
  -webkit-filter: brightness(0.55);
  filter: brightness(0.55);
}
.bar:nth-child(1) .face:nth-child(3) {
  -webkit-filter: brightness(0.5);
  filter: brightness(0.5);
}
.bar:nth-child(1) .face:nth-child(4) {
  -webkit-filter: brightness(0.45);
  filter: brightness(0.45);
}
@keyframes grow-1 {
  0%, 0% {
    transform: scaleY(0.01);
  }
  8.33333%, 100% {
    transform: scaleY(0.1);
  }
}
.bar:nth-child(2) {
  margin-left: -12em;
  animation: grow-2 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(2) .face:nth-child(1) {
  -webkit-filter: brightness(0.65);
  filter: brightness(0.65);
}
.bar:nth-child(2) .face:nth-child(2) {
  -webkit-filter: brightness(0.6);
  filter: brightness(0.6);
}
.bar:nth-child(2) .face:nth-child(3) {
  -webkit-filter: brightness(0.55);
  filter: brightness(0.55);
}
.bar:nth-child(2) .face:nth-child(4) {
  -webkit-filter: brightness(0.5);
  filter: brightness(0.5);
}
@keyframes grow-2 {
  0%, 8.33333% {
    transform: scaleY(0.01);
  }
  16.66667%, 100% {
    transform: scaleY(0.16);
  }
}
.bar:nth-child(3) {
  margin-left: -6em;
  animation: grow-3 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(3) .face:nth-child(1) {
  -webkit-filter: brightness(0.7);
  filter: brightness(0.7);
}
.bar:nth-child(3) .face:nth-child(2) {
  -webkit-filter: brightness(0.65);
  filter: brightness(0.65);
}
.bar:nth-child(3) .face:nth-child(3) {
  -webkit-filter: brightness(0.6);
  filter: brightness(0.6);
}
.bar:nth-child(3) .face:nth-child(4) {
  -webkit-filter: brightness(0.55);
  filter: brightness(0.55);
}
@keyframes grow-3 {
  0%, 16.66667% {
    transform: scaleY(0.01);
  }
  25%, 100% {
    transform: scaleY(0.25);
  }
}
.bar:nth-child(4) {
  margin-left: 0em;
  animation: grow-4 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(4) .face:nth-child(1) {
  -webkit-filter: brightness(0.75);
  filter: brightness(0.75);
}
.bar:nth-child(4) .face:nth-child(2) {
  -webkit-filter: brightness(0.7);
  filter: brightness(0.7);
}
.bar:nth-child(4) .face:nth-child(3) {
  -webkit-filter: brightness(0.65);
  filter: brightness(0.65);
}
.bar:nth-child(4) .face:nth-child(4) {
  -webkit-filter: brightness(0.6);
  filter: brightness(0.6);
}
@keyframes grow-4 {
  0%, 25% {
    transform: scaleY(0.01);
  }
  33.33333%, 100% {
    transform: scaleY(0.37);
  }
}
.bar:nth-child(5) {
  margin-left: 6em;
  animation: grow-5 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(5) .face:nth-child(1) {
  -webkit-filter: brightness(0.8);
  filter: brightness(0.8);
}
.bar:nth-child(5) .face:nth-child(2) {
  -webkit-filter: brightness(0.75);
  filter: brightness(0.75);
}
.bar:nth-child(5) .face:nth-child(3) {
  -webkit-filter: brightness(0.7);
  filter: brightness(0.7);
}
.bar:nth-child(5) .face:nth-child(4) {
  -webkit-filter: brightness(0.65);
  filter: brightness(0.65);
}
@keyframes grow-5 {
  0%, 33.33333% {
    transform: scaleY(0.01);
  }
  41.66667%, 100% {
    transform: scaleY(0.5);
  }
}
.bar:nth-child(6) {
  margin-left: 12em;
  animation: grow-6 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(6) .face:nth-child(1) {
  -webkit-filter: brightness(0.85);
  filter: brightness(0.85);
}
.bar:nth-child(6) .face:nth-child(2) {
  -webkit-filter: brightness(0.8);
  filter: brightness(0.8);
}
.bar:nth-child(6) .face:nth-child(3) {
  -webkit-filter: brightness(0.75);
  filter: brightness(0.75);
}
.bar:nth-child(6) .face:nth-child(4) {
  -webkit-filter: brightness(0.7);
  filter: brightness(0.7);
}
@keyframes grow-6 {
  0%, 41.66667% {
    transform: scaleY(0.01);
  }
  50%, 100% {
    transform: scaleY(0.64);
  }
}
.bar:nth-child(7) {
  margin-left: 18em;
  animation: grow-7 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(7) .face:nth-child(1) {
  -webkit-filter: brightness(0.9);
  filter: brightness(0.9);
}
.bar:nth-child(7) .face:nth-child(2) {
  -webkit-filter: brightness(0.85);
  filter: brightness(0.85);
}
.bar:nth-child(7) .face:nth-child(3) {
  -webkit-filter: brightness(0.8);
  filter: brightness(0.8);
}
.bar:nth-child(7) .face:nth-child(4) {
  -webkit-filter: brightness(0.75);
  filter: brightness(0.75);
}
@keyframes grow-7 {
  0%, 50% {
    transform: scaleY(0.01);
  }
  58.33333%, 100% {
    transform: scaleY(0.81);
  }
}
.bar:nth-child(8) {
  margin-left: 24em;
  animation: grow-8 13s cubic-bezier(0.17, 0.89, 0.32, 1.28) infinite;
}
.bar:nth-child(8) .face:nth-child(1) {
  -webkit-filter: brightness(0.95);
  filter: brightness(0.95);
}
.bar:nth-child(8) .face:nth-child(2) {
  -webkit-filter: brightness(0.9);
  filter: brightness(0.9);
}
.bar:nth-child(8) .face:nth-child(3) {
  -webkit-filter: brightness(0.85);
  filter: brightness(0.85);
}
.bar:nth-child(8) .face:nth-child(4) {
  -webkit-filter: brightness(0.8);
  filter: brightness(0.8);
}
@keyframes grow-8 {
  0%, 58.33333% {
    transform: scaleY(0.01);
  }
  66.66667%, 100% {
    transform: scaleY(1);
  }
}
.face {
  margin: -1.5em;
  width: 3em;
  height: 3em;
  backface-visibility: hidden;
  box-shadow: 0 0 1px currentColor;
  color: #0cd;
  background: currentColor;
}
.face:nth-child(n + 2) {
  margin-top: -12em;
  height: 24em;
}
.face:nth-child(n + 2):before {
  position: absolute;
  top: 100%;
  left: 0;
  width: inherit;
  height: inherit;
  opacity: .08;
  background: inherit;
  content: '';
}
.face:nth-child(1) {
  transform: rotate3d(1, 0, 0, 90deg) translateZ(12em);
}
.face:nth-child(2) {
  transform: rotate3d(0, 1, 0, -90deg) translateZ(1.5em);
}
.face:nth-child(3) {
  transform: rotate3d(0, 1, 0, 0deg) translateZ(1.5em);
}
.face:nth-child(4) {
  transform: rotate3d(0, 1, 0, 90deg) translateZ(1.5em);
}

JavaScript

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