css变量实现立体方块叠加扭转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css变量实现立体方块叠加扭转动画效果代码

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


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

<head>

  <meta charset="UTF-8">

<style>
.wrapper {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  overflow: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.intDiv {
  --marginVar: 2vmin;
  --delayVar: -30ms;
  position: absolute;
  width: 30vmin;
  height: 30vmin;
  left: calc(50% - 15vmin);
  top: calc(50% - 15vmin);
  background-color: red;
  -webkit-animation: rotateMe 2000ms ease-in-out infinite,
    colorMe 6000ms linear infinite;
          animation: rotateMe 2000ms ease-in-out infinite,
    colorMe 6000ms linear infinite;
  border-radius: 3vmin;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2) inset;
}
#linearRadio:checked ~ .wrapper .intDiv {
  -webkit-animation-timing-function: linear, linear;
          animation-timing-function: linear, linear;
}
#easeInRadio:checked ~ .wrapper .intDiv {
  -webkit-animation-timing-function: ease-in, linear;
          animation-timing-function: ease-in, linear;
}
#easeOutRadio:checked ~ .wrapper .intDiv {
  -webkit-animation-timing-function: ease-out, linear;
          animation-timing-function: ease-out, linear;
}
#cubicBezier:checked ~ .wrapper .intDiv {
  -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1), linear;
          animation-timing-function: cubic-bezier(1, 0, 0, 1), linear;
}
.first {
  filter: brightness(200%);
}
.intDiv:nth-last-of-type(2) {
  margin-top: calc(var(--marginVar) * 1);
  -webkit-animation-delay: calc(var(--delayVar) * 1);
          animation-delay: calc(var(--delayVar) * 1);
}
.intDiv:nth-last-of-type(3) {
  margin-top: calc(var(--marginVar) * 2);
  -webkit-animation-delay: calc(var(--delayVar) * 2);
          animation-delay: calc(var(--delayVar) * 2);
}
.intDiv:nth-last-of-type(4) {
  margin-top: calc(var(--marginVar) * 3);
  -webkit-animation-delay: calc(var(--delayVar) * 3);
          animation-delay: calc(var(--delayVar) * 3);
}
.intDiv:nth-last-of-type(5) {
  margin-top: calc(var(--marginVar) * 4);
  -webkit-animation-delay: calc(var(--delayVar) * 4);
          animation-delay: calc(var(--delayVar) * 4);
}
.intDiv:nth-last-of-type(6) {
  margin-top: calc(var(--marginVar) * 5);
  -webkit-animation-delay: calc(var(--delayVar) * 5);
          animation-delay: calc(var(--delayVar) * 5);
}
.intDiv:nth-last-of-type(7) {
  margin-top: calc(var(--marginVar) * 6);
  -webkit-animation-delay: calc(var(--delayVar) * 6);
          animation-delay: calc(var(--delayVar) * 6);
}
.intDiv:nth-last-of-type(8) {
  margin-top: calc(var(--marginVar) * 7);
  -webkit-animation-delay: calc(var(--delayVar) * 7);
          animation-delay: calc(var(--delayVar) * 7);
}
.intDiv:nth-last-of-type(9) {
  margin-top: calc(var(--marginVar) * 8);
  -webkit-animation-delay: calc(var(--delayVar) * 8);
          animation-delay: calc(var(--delayVar) * 8);
}
.intDiv:nth-last-of-type(10) {
  margin-top: calc(var(--marginVar) * 9);
  -webkit-animation-delay: calc(var(--delayVar) * 9);
          animation-delay: calc(var(--delayVar) * 9);
}
.intDiv:nth-last-of-type(11) {
  margin-top: calc(var(--marginVar) * 10);
  -webkit-animation-delay: calc(var(--delayVar) * 10);
          animation-delay: calc(var(--delayVar) * 10);
}
.intDiv:nth-last-of-type(12) {
  margin-top: calc(var(--marginVar) * 11);
  -webkit-animation-delay: calc(var(--delayVar) * 11);
          animation-delay: calc(var(--delayVar) * 11);
}
.intDiv:nth-last-of-type(13) {
  margin-top: calc(var(--marginVar) * 12);
  -webkit-animation-delay: calc(var(--delayVar) * 12);
          animation-delay: calc(var(--delayVar) * 12);
}
.intDiv:nth-last-of-type(14) {
  margin-top: calc(var(--marginVar) * 13);
  -webkit-animation-delay: calc(var(--delayVar) * 13);
          animation-delay: calc(var(--delayVar) * 13);
}
.intDiv:nth-last-of-type(15) {
  margin-top: calc(var(--marginVar) * 14);
  -webkit-animation-delay: calc(var(--delayVar) * 14);
          animation-delay: calc(var(--delayVar) * 14);
}
.intDiv:nth-last-of-type(16) {
  margin-top: calc(var(--marginVar) * 15);
  -webkit-animation-delay: calc(var(--delayVar) * 15);
          animation-delay: calc(var(--delayVar) * 15);
}
body {
  text-align: center;
  font-family: sans-serif;
  color: #555555;
}
#easeInRadio {
  margin-top: 4rem;
}
#easeRadioMore {
  margin-top: 2rem;
}
input,
label {
  position: relative;
  z-index: 9;
  margin-top: 1rem;
  cursor: pointer;
  transition: opacity 200ms linear 0s;
}
input:checked + label {
  color: #0375fd;
}
input {
  margin-left: 32px;
}
#easeRadio,
#easeRadioMore {
  margin-left: 0;
}
input[type="checkbox"],
input[type="checkbox"] + label {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(-2rem, -2rem);
  pointer-events: all !important;
  opacity: 1 !important;
}
input[type="checkbox"] {
  margin-right: 4.6rem;
  margin-bottom: 0.2rem;
.........完整代码请登录后点击上方下载按钮下载查看