CSS之立方体旋转加载

效果演示

 

这段代码实现了一个立方体旋转加载的效果，其中每个小立方体都有不同的颜色和动画效果。整个立方体是由六个相同的小立方体组成的，每个小立方体都有三个面，分别是前面、后面和侧面。每个小立方体都有一个不同的颜色和动画效果，并且在旋转时会有不同的缩放和旋转效果。整个立方体在旋转时会有一种绕组的效果，整个立方体会不断旋转和缩放，形成一种动态的效果。

Code

  <div class="loop cubes">
      <div class="item cubes"></div>
      <div class="item cubes"></div>
      <div class="item cubes"></div>
      <div class="item cubes"></div>
      <div class="item cubes"></div>
      <div class="item cubes"></div>
  </div>

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e8e8e8;
}

.cubes {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.loop {
  transform: rotateX(-35deg) rotateY(-45deg) translateZ(1.5625em);
}

@keyframes s {
  to {
    transform: scale3d(0.2, 0.2, 0.2);
  }
}

.item {
  margin: -1.5625em;
  width: 3.125em;
  height: 3.125em;
  transform-origin: 50% 50% -1.5625em;
  box-shadow: 0 0 0.125em currentColor;
  background: currentColor;
  animation: s 0.6s cubic-bezier(0.45, 0.03, 0.51, 0.95) infinite alternate;
}

.item:before,
.item:after {
  position: absolute;
  width: inherit;
  height: inherit;
  transform-origin: 0 100%;
  box-shadow: inherit;
  background: currentColor;
  content: "";
}

.item:before {
  bottom: 100%;
  transform: rotateX(90deg);
}

.item:after {
  left: 100%;
  transform: rotateY(90deg);
}

.item:nth-child(1) {
  margin-top: 6.25em;
  color: #fe1e52;
  animation-delay: -1.2s;
}

.item:nth-child(1):before {
  color: #ff6488;
}

.item:nth-child(1):after {
  color: #ff416d;
}

.item:nth-child(2) {
  margin-top: 3.125em;
  color: #fe4252;
  animation-delay: -1s;
}

.item:nth-child(2):before {
  color: #ff8892;
}

.item:nth-child(2):after {
  color: #ff6572;
}

.item:nth-child(3) {
  margin-top: 0em;
  color: #fe6553;
  animation-delay: -0.8s;
}

.item:nth-child(3):before {
  color: #ffa499;
}

.item:nth-child(3):after {
  color: #ff8476;
}

.item:nth-child(4) {
  margin-top: -3.125em;
  color: #fe8953;
  animation-delay: -0.6s;
}

.item:nth-child(4):before {
  color: #ffb999;
}

.item:nth-child(4):after {
  color: #ffa176;
}

.item:nth-child(5) {
  margin-top: -6.25em;
  color: #feac54;
  animation-delay: -0.4s;
}

.item:nth-child(5):before {
  color: #ffce9a;
}

.item:nth-child(5):after {
  color: #ffbd77;
}

.item:nth-child(6) {
  margin-top: -9.375em;
  color: #fed054;
  animation-delay: -0.2s;
}

.item:nth-child(6):before {
  color: #ffe49a;
}

.item:nth-child(6):after {
  color: #ffda77;
}

实现思路拆分

body {
  height: 100vh; /* 设置body高度为视口高度 */
  display: flex; /* 设置body元素为flex布局 */
  justify-content: center; /* 设置flex容器中内容的水平对齐方式为居中对齐 */
  align-items: center; /* 设置flex容器中内容的垂直对齐方式为居中对齐 */
  background-color: #e8e8e8; /* 设置body元素的背景颜色为#e8e8e8 */
}

这段代码设置了整个页面的样式，包括高度、布局方式、对齐方式和背景颜色等。

.cubes {
  position: absolute; /* 设置绝对定位 */
  top: 50%; /* 设置距离顶部的距离为视口高度的一半 */
  left: 50%; /* 设置距离左侧的距离为视口宽度的一半 */
  transform-style: preserve-3d; /* 设置3D效果 */
}

这段代码设置了立方体的样式，包括位置、3D效果和动画效果等。

.loop {
  transform: rotateX(-35deg) rotateY(-45deg) translateZ(1.5625em); /* 设置旋转和缩放效果 */
}

这段代码设置了立方体的旋转和缩放效果，包括旋转角度和缩放比例等。

@keyframes s {
  to {
    transform: scale3d(0.2, 0.2, 0.2); /* 设置动画效果 */
  }
}

这段代码设置了立方体的动画效果，包括动画名称、持续时间和动画效果等。

.item {
  margin: -1.5625em; /* 设置外边距为-1.5625em */
  width: 3.125em; /* 设置宽度为3.125em */
  height: 3.125em; /* 设置高度为3.125em */
  transform-origin: 50% 50% -1.5625em; /* 设置旋转中心为元素中心 */
  box-shadow: 0 0 0.125em currentColor; /* 设置阴影效果 */
  background: currentColor; /* 设置背景颜色为当前颜色 */
  animation: s 0.6s cubic-bezier(0.45, 0.03, 0.51, 0.95) infinite alternate; /* 设置动画效果 */
}

这段代码设置了每个小立方体的样式，包括外边距、宽度、高度、旋转中心、阴影效果、背景颜色和动画效果等。

.item:before,
.item:after {
  position: absolute; /* 设置绝对定位 */
  width: inherit; /* 设置宽度为继承自父元素 */
  height: inherit; /* 设置高度为继承自父元素 */
  transform-origin: 0 100%; /* 设置旋转中心为元素底部 */
  box-shadow: inherit; /* 设置阴影效果为继承自父元素 */
  background: currentColor; /* 设置背景颜色为当前颜色 */
  content: ""; /* 设置内容为空 */
}

这段代码设置了每个小立方体的前面和侧面的样式，包括位置、宽度、高度、旋转中心、阴影效果、背景颜色和内容等。

.item:before {
  bottom: 100%; /* 设置距离底部的距离为100% */
  transform: rotateX(90deg); /* 设置旋转角度为90度 */
}

这段代码设置了每个小立方体的前面面的样式，包括距离底部的距离和旋转角度等。

.item:after {
  left: 100%; /* 设置距离左侧的距离为100% */
  transform: rotateY(90deg); /* 设置旋转角度为90度 */
}

这段代码设置了每个小立方体的侧面的样式，包括距离左侧的距离和旋转角度等。

.item:nth-child(1) {
  margin-top: 6.25em; /* 设置距离顶部的距离为6.25em */
  color: #fe1e52; /* 设置颜色为#fe1e52 */
  animation-delay: -1.2s; /* 设置动画延迟时间为-1.2s */
}

这段代码设置了第一个小立方体的样式，包括距离顶部的距离、颜色和动画延迟时间等。

.item:nth-child(1):before {
  color: #ff6488; /* 设置颜色为#ff6488 */
}

这段代码设置了第一个小立方体的前面面的样式，包括颜色。

.item:nth-child(1):after {
  color: #ff416d; /* 设置颜色为#ff416d */
}

这段代码设置了第一个小立方体的侧面的样式，包括颜色。

.item:nth-child(2) {
  margin-top: 3.125em; /* 设置距离顶部的距离为3.125em */
  color: #fe4252; /* 设置颜色为#fe4252 */
  animation-delay: -1s; /* 设置动画延迟时间为-1s */
}

这段代码设置了第二个小立方体的样式，包括距离顶部的距离、颜色和动画延迟时间等。

.item:nth-child(2):before {
  color: #ff8892; /* 设置颜色为#ff8892 */
}

这段代码设置了第二个小立方体的前面面的样式，包括颜色。

.item:nth-child(2):after {
  color: #ff6572; /* 设置颜色为#ff6572 */
}

这段代码设置了第二个小立方体的侧面的样式，包括颜色。

.item:nth-child(3) {
  margin-top: 0em; /* 设置距离顶部的距离为0 */
  color: #fe6553; /* 设置颜色为#fe6553 */
  animation-delay: -0.8s; /* 设置动画延迟时间为-0.8s */
}

这段代码设置了第三个小立方体的样式，包括距离顶部的距离、颜色和动画延迟时间等。

.item:nth-child(3):before {
  color: #ffa499; /* 设置颜色为#ffa499 */
}

这段代码设置了第三个小立方体的前面面的样式，包括颜色。

.item:nth-child(3):after {
  color: #ff8476; /* 设置颜色为#ff8476 */
}

这段代码设置了第三个小立方体的侧面的样式，包括颜色。

.item:nth-child(4) {
  margin-top: -3.125em; /* 设置距离顶部的距离为-3.125em */
  color: #fe8953; /* 设置颜色为#fe8953 */
  animation-delay: -0.6s; /* 设置动画延迟时间为-0.6s */
}

这段代码设置了第四个小立方体的样式，包括距离顶部的距离、颜色和动画延迟时间等。

.item:nth-child(4):before {
  color: #ffb999; /* 设置颜色为#ffb999 */
}

这段代码设置了第四个小立方体的前面面的样式，包括颜色。

.item:nth-child(4):after {
  color: #ffa176; /* 设置颜色为#ffa176 */
}

这段代码设置了第四个小立方体的侧面的样式，包括颜色。

.item:nth-child(5) {
  margin-top: -6.25em; /* 设置距离顶部的距离为-6.25em */
  color: #feac54; /* 设置颜色为#feac54 */
  animation-delay: -0.4s; /* 设置动画延迟时间为-0.4s */
}

这段代码设置了第五个小立方体的样式，包括距离顶部的距离、颜色和动画延迟时间等。

.item:nth-child(5):before {
  color: #ffce9a; /* 设置颜色为#ffce9a */
}

这段代码设置了第五个小立方体的前面面的样式，包括颜色。

.item:nth-child(5):after {
  color: #ffbd77; /* 设置颜色为#ffbd77 */
}

这段代码设置了第五个小立方体的侧面的样式，包括颜色。

.item:nth-child(6) {
  margin-top: -9.375em; /* 设置距离顶部的距离为-9.375em */
  color: #fed054; /* 设置颜色为#fed054 */
  animation-delay: -0.2s; /* 设置动画延迟时间为-0.2s */
}

这段代码设置了第六个小立方体的样式，包括距离顶部的距离、颜色和动画延迟时间等。

.item:nth-child(6):before {
  color: #ffe49a; /* 设置颜色为#ffe49a */
}

这段代码设置了第六个小立方体的前面面的样式，包括颜色。

.item:nth-child(6):after {
  color: #ffda77; /* 设置颜色为#ffda77 */
}

这段代码设置了第六个小立方体的侧面的样式，包括颜色。