div+css实现三维切片分层效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：div+css实现三维切片分层效果代码

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

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

<head>
  <meta charset="UTF-8">

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Bungee&display=swap");
* {
  box-sizing: border-box;
  margin: auto;
}

body {
  position: relative;
  height: 100vh;
  display: flex;
  background-color: #0d0d0d;
  background-image: radial-gradient(at 80% 0%, #111212 0px, transparent 50%), radial-gradient(at 40% 20%, rgba(255, 184, 122, 0.25) 0px, transparent 50%), radial-gradient(at 63% 100%, #13131b 0px, transparent 50%), radial-gradient(at 0% 50%, #6f3e42 0px, transparent 50%), radial-gradient(at 80% 50%, rgba(209, 51, 104, 0.57) 0px, transparent 50%), radial-gradient(at 31% 100%, rgba(244, 81, 6, 0.75) 0px, transparent 50%), radial-gradient(at 0% 0%, #693f4b 0px, transparent 50%);
  overflow: hidden;
  perspective: 1440px;
}
body::before, body::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  left: -50%;
  top: -50%;
  mix-blend-mode: darken;
  mix-blend-mode: difference;
  mix-blend-mode: exclusion;
  mix-blend-mode: multiply;
}
body::before {
  background: #000;
  filter: url(#noice);
  z-index: 100;
}
body::after {
  background: conic-gradient(#111212, rgba(255, 184, 122, 0.25), #13131b, #6f3e42, rgba(209, 51, 104, 0.57), rgba(244, 81, 6, 0.75), #693f4b);
  filter: blur(130px);
  animation: spin 10s linear infinite;
  z-index: -2;
}

svg {
  position: absolute;
}

.digipie {
  position: relative;
  width: clamp(0%,150vmin,100%);
  height: 100%;
  transform-style: preserve-3d;
  border-radius: 0;
  animation: position 3s ease-in-out forwards;
}
.digipie .slice {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: inherit;
  transform-style: preserve-3d;
  perspective: 500px;
}
.digipie .slice.frame {
  border: clamp(1px,1vmin,10px) solid #fff;
}
.digipie .slice.frame p {
  position: absolute;
  width: 100%;
  text-align: center;
  font-family: Bungee;
  font-size: clamp(0rem, 15vmin,8rem);
  letter-spacing: 0.2rem;
  color: #f0f0f0;
}
.digipie .slice.frame p:first-of-type {
  bottom: 90%;
}
.digipie .slice.frame p:last-of-type {
  top: 90%;
}
.digipie .slice.rails {
  background-image: linear-gradient(45deg, #477ED7 25%, transparent 25%), linear-gradient(-45deg, #477ED7 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #477ED7 75%), linear-gradient(-45deg, transparent 75%, #477ED7 75%);
  background-size: 40px 80px;
  background-position: 0 0, 0 20px, 40px -40px, -40px 0px;
  transform: translateZ(-10vmin);
}
.digipie .slice.vBars {
  background-image: linear-gradient(to right, gold 0px, #d98796 10px, transparent 10px, transparent 20px);
  background-size: 20px 100%;
}
.digipie .slice.hBars {
  background-image: linear-gradient(to bottom, #b73852 0px, purple 10px, transparent 10px, transparent 20px);
  background-size: 100% 20px;
}
.digipie .slice.magic {
  overflow: hidden;
}
.digipie .slice.magic::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  left: -50%;
  top: -50%;
  background: conic-gradient(white, black, white, black, white, black, white);
  filter: blur(130px);
  animation: spin 10s linear infinite;
}
.digipie .slice.magic.colors::after {
  background: conic-gradient(#242423, #f2f7f2, #00afb9, #f07167, #7d83ff);
  animation-direction: reverse;
}
.digipie .slice.backSlash {
  background-image: repeating-linear-gradient(45deg, #ffffff 0px, #ffffff 5px, transparent 5px, transparent 20px);
}
.digipie .slice.forwardSlash {
  background-image: repeating-linear-gradient(-45deg, #ffffff 0px, #ffffff 5px, transparent 5px, transparent 20px);
}
@keyframes position1 {
  100% {
    opacity: 0.6;
    transform: translateZ(-10vmin) translateY(2vmin) scale(0.95);
  }
}
@keyframes bobble1 {
  100% {
    transform: translateZ(-9vmin) translateY(2vmin) scale(0.955);
  }
}
.digipie .slice:nth-of-type(1) {
  transform: translateZ(0) translateY(0);
  animation: position1 3s ease-in-out forwards, bobble1 1.5s ease-in-out infinite alternate 3.85s;
  z-index: -1;
}
@keyframes position2 {
  100% {
    opacity: 0.6;
    transform: translateZ(-20vmin) translateY(4vmin) scale(0.9);
  }
}
@keyframes bobble2 {
  100% {
    transform: translateZ(-18vmin) translateY(4vmin) scale(0.91);
  }
}
.digipie .slice:nth-of-type(2) {
  transform: translateZ(0) translateY(0);
  animation: position2 3s ease-in-out forwards, bobble2 1.5s ease-in-out infinite alternate 3.95s;
  z-index: -2;
}
@keyframes position3 {
  100% {
    opacity: 0.6;
    transform: translateZ(-30vmin) translateY(6vmin) scale(0.85);
  }
}
@keyframes bobble3 {
  100% {
    transform: translateZ(-27vmin) translateY(6vmin) scale(0.865);
  }
}
.digipie .slice:nth-of-type(3) {
  transform: translateZ(0) translateY(0);
  animation: position3 3s ease-in-out forwards, bobble3 1.5s ease-in-out infinite alternate 4.05s;
  z-index: -3;
}
@keyframes position4 {
  100% {
    opacity: 0.6;
    transform: translateZ(-40vmin) translateY(8vmin) scale(0.8);
  }
}
@keyframes bobble4 {
  100% {
    transform: translateZ(-36vmin) translateY(8vmin) scale(0.82);
  }
}
.digipie .slice:nth-of-type(4) {
  transform: translateZ(0) translateY(0);
  animation: position4 3s ease-in-out forwards, bobble4 1.5s ease-in-out infinite alternate 4.15s;
  z-index: -4;
}
@keyframes position5 {
  100% {
    opacity: 0.6;
    transform: translateZ(-50vmin) translateY(10vmin) scale(0.75);
  }
}
@keyframes bobble5 {
  100% {
    transform: translateZ(-45vmin) translateY(10vmin) scale(0.775);
  }
}
.digipie .slice:nth-of-type(5) {
  transform: translateZ(0) translateY(0);
  animation: position5 3s ease-in-out forwards, bobble5 1.5s ease-in-out infinite alternate 4.25s;
  z-index: -5;
}
@keyframes position6 {
  100% {
    opacity: 0.6;
    transform: translateZ(-60vmin) translateY(12vmin) scale(0.7);
  }
}
@keyframes bobble6 {
  100% {
    transform: translateZ(-54vmin) translateY(12vmin) scale(0.73);
  }
}
.digipie .slice:nth-of-type(6) {
  transform: translateZ(0) translateY(0);
  animation: positi.........完整代码请登录后点击上方下载按钮下载查看