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

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

代码语言：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-.........完整代码请登录后点击上方下载按钮下载查看