div+css实现立方体上下伸缩loading加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现立方体上下伸缩loading加载动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
html {
        touch-action: none;
        content-zooming: none;
        box-sizing: border-box;
}

body {
        margin: 0;
        padding: 0;
        background: #000;
        overflow: hidden;
}

.ground {
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        position: absolute;
        background: #000;
        width: 103.2vmin;
        height: 90vmin;
        overflow: hidden;
        transform: scale(1.4);
        filter: sepia(100%) blur(0.05vmin);
}

.move {
        position: absolute;
}

.cube {
        position: absolute;
        width: 17.3vmin;
        height: 20.0vmin;
}

.face {
        transform-origin: 0 0;
        position: absolute;
        width: 10vmin;
        height: 10vmin;
        border:#666 inset 0.05vmin;
        border-radius: 0.025vmin;
}

.front {
        background: #333;
        transform: translate(-2.6vmin, -3.4vmin) rotate(-30deg) skewX(-30deg)
                translate(13vmin, 17.2vmin) scaleY(0.864);
}

.top {
        background: #fff;
        transform: translate(-2.6vmin, -3.4vmin) rotate(210deg) skew(-30deg)
                translate(-20vmin, -6vmin) scaleY(0.864);
}

.side {
        background: #666;
        transform: translate(-2.6vmin, -3.4vmin) rotate(90deg) skewX(-30deg)
                scaleY(0.864) translate(6.8vmin, -13.1vmin);
}

@keyframes move {
        0% {
                transform: translateY(-5.3vmin);
                filter: brightness(1);
        }
        100% {
                transform: translateY(5.3vmin);
                filter: brightness(0.1);
        }
}

.cube:nth-child(1) {transform: translate(43vmin, 20vmin);}
.cube:nth-child(2) {transform: translate(34.5vmin, 24.9vmin);}
.cube:nth-child(3) {transform: translate(51.6vmin, 24.9vmin);}
.cube:nth-child(4) {transform: translate(26vmin, 29.8vmin);}
.cube:nth-child(5) {transform: translate(43vmin, 29.8vmin);}
.cube:nth-child(6) {transform: translate(60.2vmin, 29.8vmin);}
.cube:nth-child(7) {transform: translate(17.5vmin, 34.7vmin);}
.cube:nth-child(8) {transform: translate(34.5vmin, 34.7vmin);}
.cube:nth-child(9) {transform: translate(51.6vmin, 34.7vmin);}
.cube:nth-child(10) {transform: translate(68.8vmin, 34.7vmin);}
.cube:nth-child(11) {transform: translate(9vmin, 39.6vmin);}
.cube:nth-child(12) {transform: translate(26vmin, 39.6vmin);}
.cube:nth-child(13) {transform: translate(43vmin, 39.6vmin);}
.cube:nth-child(14) {transform: translate(60.2vmin, 39.6vmin);}
.cube:nth-child(15) {transform: translate(77.3vmin, 39.6vmin);}
.cube:nth-child(16) {transform: translate(17.5vmin, 44.5vmin);}
.cube:nth-child(17) {transform: translate(34.5vmin, 44.5vmin);}
.cube:nth-child(18) {transform: translate(51.6vmin, 44.5vmin);}
.cube:nth-child(19) {transform: translate(68.8vmin, 44.5vmin);}
.cube:nth-child(20) {transform: translate(26vmin, 49.4vmin);}
.cube:nth-child(21) {transform: translate(43vmin, 49.4vmin);}
.cube:nth-child(22) {transform: translate(60.2vmin, 49.4vmin);}
.cube:nth-child(23) {transform: translate(34.5vmin, 54.3vmin);}
.cube:nth-child(24) {transform: translate(51.6vmin, 54.3vmin);}
.cube:nth-child(25) {transform: translate(43vmin, 59.2vmin);}

.cube:nth-child(1) > .move {animation: move infinite 1.7s ease-in-out alternate;}
.cube:nth-child(2) > .move {animation: move infinite 2.4s ease-in-out alternate;}
.cube:nth-child(3) > .move {animation: move infinite 3.2s ease-in-out alternate;}
.cube:nth-child(4) > .move {animation: move infinite 1.5s ease-in-out alternate;}
.cube:nth-child(5) > .move {animation: move infinite 3.9s ease-in-out alternate;}
.cube:nth-child(6) > .move {animation: move infinite 1.2s ease-in-out alternate;}
.cube:nth-child(7) > .move {animation: move infinite 4.4s ease-in-out alternate;}
.cube:nth-child(8) > .move {animation: move infinite 2.5s ease-in-out alternate;}
.cube:nth-child(9) > .move {animation: move infinite 2.7s ease-in-out alternate;}
.cube:nth-child(10) > .move {animation: move infinite 1.7s ease-in-out alternate;}
.cube:nth-child(11) > .move {animation: move infinite 3.4s ease-in-out alternate;}
.cube:nth-child(12) > .move {animation: move infinite 2.2s ease-in-out alternate;}
.cube:nth-child(13) > .move {animation: move infinite 1.4s ease-in-out alternate;}
.cube:nth-child(14) > .move {animation: move infinite 5.6s ease-in-out alternate;}
.cube:nth-child(15) > .move {animation: move infinite 1.3s ease-in-out alternate;}
.cube:nth-ch.........完整代码请登录后点击上方下载按钮下载查看