div+css实现方块立方体漂浮旋转背景动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：div+css实现方块立方体漂浮旋转背景动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

<style>
    /* basic style */
html,
body {
  position: relative;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse at left top, #72c7fe, #fafdff);
}

div {
  transform-style: preserve-3d;
}

.container {
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

/* cube style */
.cube_wrap:nth-of-type(1) {
  position: absolute;
  top: 61%;
  left: calc(50% + 10px);
  width: 10vw;
  height: 10vw;
  animation: cube 32s linear -28s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(1) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 22s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(1) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(64deg);
}
.cube_wrap:nth-of-type(1) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(1) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(1) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(1) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(1) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(1) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(1) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(2) {
  position: absolute;
  top: 32%;
  left: calc(50% + 20px);
  width: 10vw;
  height: 10vw;
  animation: cube 34s linear -26s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(2) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 27s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(2) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(141deg);
}
.cube_wrap:nth-of-type(2) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(2) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(2) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(2) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(2) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(2) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(2) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(3) {
  position: absolute;
  top: 49%;
  left: calc(50% + 30px);
  width: 10vw;
  height: 10vw;
  animation: cube 36s linear -24s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(3) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 26s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(3) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(142deg);
}
.cube_wrap:nth-of-type(3) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(3) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(3) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(3) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(3) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(3) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(3) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(4) {
  position: absolute;
  top: 18%;
  left: calc(50% + 40px);
  width: 10vw;
  height: 10vw;
  animation: cube 38s linear -22s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(4) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 21s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(4) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(48deg);
}
.cube_wrap:nth-of-type(4) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(4) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(4) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(4) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(4) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(4) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(4) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(5) {
  position: absolute;
  top: 36%;
  left: calc(50% + 50px);
  width: 10vw;
  height: 10vw;
  animation: cube 40s linear -20s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(5) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 36s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(5) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(51deg);
}
.cube_wrap:nth-of-type(5) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(5) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(5) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(5) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(5) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(5) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(5) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(6) {
  position: absolute;
  top: 17%;
  left: calc(50% + 60px);
  width: 10vw;
  height: 10vw;
  animation: cube 42s linear -18s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(6) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 30s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(6) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(115deg);
}
.cube_wrap:nth-of-type(6) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(6) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(6) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(6) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(6) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(6) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(6) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(7) {
  position: absolute;
  top: 41%;
  left: calc(50% + 70px);
  width: 10vw;
  height: 10vw;
  animation: cube 44s linear -16s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(7) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 36s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(7) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(1deg);
}
.cube_wrap:nth-of-type(7) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(7) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(7) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(7) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(7) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(7) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(7) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(8) {
  position: absolute;
  top: 39%;
  left: calc(50% + 80px);
  width: 10vw;
  height: 10vw;
  animation: cube 46s linear -14s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(8) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 34s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(8) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(112deg);
}
.cube_wrap:nth-of-type(8) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(8) .front {
  transform: translateZ(5vw);
}
.cube_wrap:nth-of-type(8) .back {
  transform: rotateY(180deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(8) .left {
  transform: rotateY(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(8) .right {
  transform: rotateY(-90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(8) .top {
  transform: rotateX(90deg) translateZ(5vw);
}
.cube_wrap:nth-of-type(8) .bottom {
  transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(9) {
  position: absolute;
  top: 38%;
  left: calc(50% + 90px);
  width: 6vw;
  height: 6vw;
  animation: cube 48s linear -12s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(9) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 25s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(9) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(95deg);
}
.cube_wrap:nth-of-type(9) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(9) .front {
  transform: translateZ(3vw);
}
.cube_wrap:nth-of-type(9) .back {
  transform: rotateY(180deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(9) .left {
  transform: rotateY(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(9) .right {
  transform: rotateY(-90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(9) .top {
  transform: rotateX(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(9) .bottom {
  transform: rotateX(-90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(10) {
  position: absolute;
  top: 54%;
  left: calc(50% + 100px);
  width: 6vw;
  height: 6vw;
  animation: cube 50s linear -10s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(10) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 23s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(10) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(51deg);
}
.cube_wrap:nth-of-type(10) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(10) .front {
  transform: translateZ(3vw);
}
.cube_wrap:nth-of-type(10) .back {
  transform: rotateY(180deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(10) .left {
  transform: rotateY(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(10) .right {
  transform: rotateY(-90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(10) .top {
  transform: rotateX(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(10) .bottom {
  transform: rotateX(-90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(11) {
  position: absolute;
  top: 42%;
  left: calc(50% + 110px);
  width: 6vw;
  height: 6vw;
  animation: cube 52s linear -8s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(11) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 24s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(11) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(14deg);
}
.cube_wrap:nth-of-type(11) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(11) .front {
  transform: translateZ(3vw);
}
.cube_wrap:nth-of-type(11) .back {
  transform: rotateY(180deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(11) .left {
  transform: rotateY(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(11) .right {
  transform: rotateY(-90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(11) .top {
  transform: rotateX(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(11) .bottom {
  transform: rotateX(-90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(12) {
  position: absolute;
  top: 33%;
  left: calc(50% + 120px);
  width: 6vw;
  height: 6vw;
  animation: cube 54s linear -6s infinite;
  opacity: 0.7;
  z-index: 99;
}
@keyframes cube {
  0% {
    transform: translateX(-150vw);
  }
  100% {
    transform: translateX(150vw);
  }
}
.cube_wrap:nth-of-type(12) .cube {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotation 23s linear infinite;
}
@keyframes rotation {
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube_wrap:nth-of-type(12) .rotation {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(168deg);
}
.cube_wrap:nth-of-type(12) .wall {
  position: absolute;
  width: 100%;
  height: 100%;
  border: solid 3px #fff;
}
.cube_wrap:nth-of-type(12) .front {
  transform: translateZ(3vw);
}
.cube_wrap:nth-of-type(12) .back {
  transform: rotateY(180deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(12) .left {
  transform: rotateY(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(12) .right {
  transform: rotateY(-90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(12) .top {
  transform: rotateX(90deg) translateZ(3vw);
}
.cube_wrap:nth-of-type(12) .bottom {
  transform: rotateX(-90deg) translateZ(3vw);
}

/* square style */
.square:nth-of-type(1) {
  position: absolute;
  top: calc(20% + 99px);
  left: 95%;
  opacity: 0.3;
}

.square:nth-of-type(2) {
  position: absolute;
  top: calc(20% + 195px);
  left: 45%;
  opacity: 0.3;
}

.square:nth-of-type(3) {
  position: absolute;
  top: calc(20% + 131px);
  left: 53%;
  opacity: 0.3;
}

.square:nth-of-type(4) {
  position: absolute;
  top: calc(20% + 37px);
  left: 17%;
  opacity: 0.3;
}

.square:nth-of-type(5) {
  position: absolute;
  top: calc(20% + 25px);
  left: 48%;
  opacity: 0.3;
}

.square:nth-of-type(6) {
  position: absolute;
  top: calc(20% + 217px);
  left: 68%;
  opacity: 0.3;
}

.square:nth-of-type(7) {
  position: absolute;
  top: calc(20% + 263px);
  left: 64%;
  opacity: 0.3;
}

.square:nth-of-type(8) {
  position: absolute;
  top: calc(20% + 197px).........完整代码请登录后点击上方下载按钮下载查看