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