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

.s2d {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: url(//repo.bfw.wiki/bfwrepo/image/60b626c1468ea.png) 50%/cover;
}
.s2d:before {
  margin: inherit;
  width: inherit;
  height: inherit;
  background: #000;
  content: '';
}
.s2d:nth-child(-n + 4) {
  margin: -7.50555em;
  width: 15.01111em;
  height: 15.01111em;
  transform-origin: 50% 11.25833em;
  background: url(//repo.bfw.wiki/bfwrepo/image/60b626c1468ea.png) 50%/cover, url(//repo.bfw.wiki/bfwrepo/image/60b626e645f11.png) 0/13em, url(//repo.bfw.wiki/bfwrepo/image/60b626e645f11.png) 0/13em;
  background-blend-mode: lighten;
  -webkit-animation: shine 1.25s linear infinite;
          animation: shine 1.25s linear infinite;
}
.s2d:nth-child(-n + 4):before {
  opacity: .01;
  -webkit-animation: shade 2.5s linear infinite alternate;
          animation: shade 2.5s linear infinite alternate;
}
.s2d:nth-child(5):before {
  opacity: .85;
  transform: scale(0.95);
  -webkit-.........完整代码请登录后点击上方下载按钮下载查看