css实现一个三维大理石材质金字塔堆叠动画效果代码-html代码-BFW代码库

css实现一个三维大理石材质金字塔堆叠动画效果代码

代码语言：html

所属分类：三维

代码描述：css实现一个三维大理石材质金字塔堆叠动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  overflow: hidden;
  height: 100vh;
  perspective: 32em;
  perspective-origin: 50% calc(50% - 13em);
  background: linear-gradient(#000000, #222222);
}

.a3d {
  -webkit-animation: r 5s linear infinite;
          animation: r 5s linear infinite;
}

@-webkit-keyframes r {
  to {
    transform: rotateY(1turn);
  }
}

@keyframes r {
  to {
    transform: rotateY(1turn);
  }
}
div, :before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.s3d:nth-child(1) .s2d:last-child {
  margin: -4.33333em;
  width: 8.66667em;
  height: 8.66667em;
  transform: translateY(0.68865em) rotateX(90deg);
}
.s3d:nth-child(1) .s2d:nth-child(-n + 4) {
  -webkit-clip-path: url(#c1);
          clip-path: url(#c1);
}
.s3d:nth-child(2) {
  -webkit-animation: split2 10s ease-in infinite alternate;
          animation: split2 10s ease-in infinite alternate;
}
@-webkit-keyframes split2 {
  0%, 25% {
    transform: none;
  }
  75%, 100% {
    transform: translateY(-4em);
  }
}
@keyframes split2 {
  0%, 25% {
    transform: none;
  }
  75%, 100% {
    transform: translateY(-4em);
  }
}
.s3d:nth-child(2) .s2d:last-child {
  margin: -2.16667em;
  width: 4.33333em;
  height: 4.33333em;
  transform: translateY(-2.37548em) rotateX(90deg);
}
.s3d:nth-child(2) .s2d:nth-child(-n + 4) {
  -webkit-clip-path: url(#c2);
          clip-path: url(#c2);
}
.s3d:nth-child(3) {
  -webkit-animation: split3 10s ease-in infinite alternate;
          animation: split3 10s ease-in infinite alternate;
}
@-webkit-keyframes split3 {
  0%, 25% {
    transform: none;
  }
  75%, 100% {
    transform: translateY(-6em);
  }
}
@keyframes split3 {
  0%, 25% {
    transform: none;
  }
  75%, 100% {
    transform: translateY(-6em);
  }
}
.s3d:nth-child(3) .s2d:nth-child(-n + 4) {
  -webkit-clip-path: url(#c3);
          clip-path: url(#c3);
}.........完整代码请登录后点击上方下载按钮下载查看