纯css实现立方体拆解加载loading动画效果-html代码-BFW代码库

纯css实现立方体拆解加载loading动画效果

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">


<style>
body {
  overflow: hidden;
  margin: 0;
  height: 100vh;
  background: #8ab7ca;
}
body:before, body:after {
  position: absolute;
  width: 100%;
  opacity: .05;
  font: italic 900 4vmin/ 2 petit formal script;
  text-align: center;
}
body:before {
  content: "Missing you every day";
}
body:after {
  bottom: 0;
  content: "1st of June 1927 - 18th of January 2019";
}

@keyframes prog {
  to {
    transform: translate(0);
  }
}
div {
  position: absolute;
  transform-style: preserve-3d;
}

.slice {
  left: calc((var(--k) - .5*(var(--n) - 1))*10em/var(--n));
  animation: a 8s calc(var(--k)/var(--n)*4s - 8s) infinite forwards;
}
.slice:nth-child(1) {
  --k: 0;
}
.slice:nth-child(2) {
  --k: 1;
}
.slice:nth-child(3) {
  --k: 2;
}
.slice:nth-child(4) {
  --k: 3;
}

.cube {
  --n: 4;
  --f: 0;
  --notf: calc(1 - var(--f));
  --sgnf: calc(1 - 2*var(--f));
  top: 50%;
  left: 50%;
  transform: rotatex(-35deg) rotatey(calc(var(--sgnf)*45deg));
  animation: flip 8s steps(1) infinite;
}

@keyframes flip {
  50% {
    --f: 1;
  }
}
.cuboid {
  animation-name: cuboid;
}
.cuboid__face {
  --i: 0;
  --j: calc(1 - var(--i));
  --m: 1;
  --out: var(--i);
  --p: 0;
  --inn: calc(1 - var(--out));
  --top: calc(var(--p)*var(--i));
  --lat: calc(1 - var(--top));
  --pad: calc((var(--j) + var(--i)/var(--n))*5em);
  margin: -5em calc(-1*var(--pad));
  padding: 5em var(--pad);
  transform: rotate3d(var(--i), var(--j), 0, calc(var(--m)*90deg)) translatez(calc((var(--i) + var(--j)/var(--n))*5em));
  box-shadow: 0 0 calc(var(--i)*1px) currentcolor;
  background: currentcolor;
  --lum: calc(65% + var(--out)*15% + var(--top)*20% + (var(--notf)*var(--i) + var(--f)*var(--j))*var(--lat)*10%);
  color: HSL(200, calc(var(--inn)*30%), var(--lum));
}
.cuboid__face:nth-child(2n) {
  --p: 1;
}
.cuboid__face:nth-child(-n + 4) {
  --i: 1;
}
.cuboid__face:nth-child(1) {
  --m: 0;
}
.cuboid__face:nth-child(3) {
  --m: 2;
}
.cuboid__face:nth-child(4) {
  --m: 3;
}
.cuboid__face:nth-child(6) {
  --m: -1;
}
.cuboid:nth-child(1) .cuboid__face:nth-child(6), .cuboid:nth-child(4) .cuboid__face:nth-child(5) {
  --out: 1;
}

@keyframes cuboid {
  54.375% {
    transform: translatey(-1.36719em);
  }
  4.375% {
    transform: translatey(1.36719em);
  }
  57.5% {
    transform: translatey(-1.875em);
  }
  7.5% {
    transform: translatey(1.875em);
  }
  59.375% {
    transform: translatey(-1.99219em);
  }
  9.375% {
    transform: translatey(1.99219em);
  }
  0%, 52.5%, 56.25%, 58.75%, 60%, 100% {
    transform: translatey(-2em);
  }
  2.5%, 6.25%, 8.75%, 10%, 50% {
    transform: translatey(2em);
  }
  52.5%, 56.25%, 58.75%, 2.5%, 6.25%, 8.75% {
    animation-timing-function: ease-out;
  }
  54.375%, 57.5%, 59.375%, 4..........完整代码请登录后点击上方下载按钮下载查看