div+css实现三维立方体盒子折叠展开动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现三维立方体盒子折叠展开动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
:root {
  --anim-duration: 5s;
  --anim-delay: 0s;
  --anim-props: ease-in-out infinite;
  --clr-cube-1: deepskyblue;
  --clr-cube-2: deeppink;
  --clr-lines: #919084;
  --clr-bg: #2a2b31;
  --grid-v: repeating-linear-gradient(
  	to right,
  	transparent 0,
  	transparent calc(5rem - 1px),
  	var(--clr-lines) 0,
  	var(--clr-lines) 5rem
  );
  --grid-h: repeating-linear-gradient(
  	to bottom,
  	transparent 0,
  	transparent calc(5rem - 1px),
  	var(--clr-lines) 0,
  	var(--clr-lines) 5rem
  );
  --bounce: cubic-bezier(0.4, 0.2, 0.5, 1.6);
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  perspective: 30rem;
  background: var(--clr-bg);
}

body * {
  transform-style: preserve-3d;
}

.floor {
  display: grid;
  width: 45rem;
  height: 40rem;
  grid-template-columns: repeat(9, 5rem);
  grid-template-rows: repeat(8, 5rem);
  background: yellow;
  background-image: radial-gradient(ellipse at center, transparent 25%, var(--clr-bg) 70%), var(--grid-h), var(--grid-v);
  -webkit-animation: var(--anim-duration) var(--anim-props) floor;
          animation: var(--anim-duration) var(--anim-props) floor;
}

.cube__wrapper:nth-of-type(1) {
  grid-area: 4/4/8/7;
}
.cube__wrapper:nth-of-type(1) .face {
  background: var(--clr-cube-1);
}

.cube__wrapper:nth-of-type(2) {
  grid-area: 1/5/5/8;
  transform: rotateZ(180deg);
  --anim-delay: -0.5s;
}
.cube__wrapper:nth-of-type(2) .face {
  background: var(--clr-cube-2);
}

.cube__wrapper {
  position: relative;
}
.cube__wrapper:after {
  position: absolute;
  content: "";
  width: 5rem;
  height: 5rem;
  top: 5rem;
  left: 5rem;
  background: rgba(0, 0, 0, 0.7);
  -webkit-animation: var(--anim-duration) var(--anim-props) var(--anim-delay) cube-shadow;
          animation: var(--anim-duration) var(--anim-props) var(--anim-delay) cube-shadow;
}

.cube {
  display: grid;
  grid-template-columns: repeat(3, 5rem);
  grid-template-rows: repeat(4, 5rem);
  transform-origin: 50% 37.5% 2.5rem;
  -webkit-animation: var(--anim-duration) var(--anim-props) var(--anim-delay) cube-anim;
          animation: var(--anim-duration) var(--anim-props) var(--anim-delay) cube-anim;
}

.face {
  position: relative;
  box-shadow: 0 0 0.8333333333rem rgba(255, 255, 255, 0.25) inset;
}
.face:before, .face:after {
  content: "";
  position: absolute;
  inset: 0;
}
.face:before {
  background: yellow;
  transform: translate3d(0, 0, 1px);
  background-image: var(--grid-h), var(--grid-v);
}
.face:after {
  -webkit-animation: var(--anim-duration) var(--anim-props) var(--anim-delay) face-shadow;
          animation: var(--anim-duration) var(--anim-props) var(--anim-delay) face-shadow;
}

.face.back {
  grid-area: 1/2;
  transform-origin: 50% 100%;
}

.face.bottom {
  grid-area: 2/2;
}

.group {
  grid-area: 3/2/5/3;
  transform-origin: 50% 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}

.face.front {
  grid-area: 1/1;
}

.face.top {
  grid-area: 2/1;
  transform-origin: 50% 0;
}

.face.left {
  grid-area: 2/1;
  transform-origin: 100% 50%;
}

.face.right {
  grid-area: 2/3;
  transform-origin: 0 50%;
}

.face.back,
.group,
.face.top,
.face.left,
.face.right {
  -webkit-animation: var(--anim-duration) var(--anim-props) var(--anim-delay) folding;
          animation: var(--anim-duration) var(--anim-props) var(--anim-delay) folding;
}

@-webkit-keyframes folding {
  0%, 100% {
    transform: rotatey(0);
  }
  20%, 80% {
    transform: var(--transform);
  }
}

@keyframes folding {
  0%, 100% {
    transform: rotatey(0);
  }
  20%, 80% {
    transform: var(--transform);
  }
}
@-webkit-keyframes face-shadow {
  0%, 100% {
    background-image: linear-gradient(var(--grad), rgba(0, 0, 0, 0.75) 100%, rgba(0, 0, 0, 0));
  }
  20%, 80% {
    background-image: linear-gradient(var(--grad), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  }
}
@keyframes face-shadow {
  0%, 100% {
    background-image: linear-gradient(var(--grad), rgba(0, 0, 0, 0.75) 100%, rgba(0, 0, 0, 0));
  }
  20%, 80% {
    background-image: linear-gradient(var(--grad), rgba(0,.........完整代码请登录后点击上方下载按钮下载查看