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

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

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