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-child(16) > .move {animation: move infinite 3.7s ease-in-out alternate;}
.cube:nth-child(17) > .move {animation: move infinite 1.1s ease-in-out alternate;}
.cube:nth-child(18) > .move {animation: move infinite 3.5s ease-in-out alternate;}
.cube:nth-child(19) > .move {animation: move infinite 4.6s ease-in-out alternate;}
.cube:nth-child(20) > .move {animation: move infinite 2.2s ease-in-out alternate;}
.cube:nth-child(21) > .move {animation: move infinite 4.4s ease-in-out alternate;}
.cube:nth-child(22) > .move {animation: move infinite 2.8s ease-in-out alternate;}
.cube:nth-child(23) > .move {animation: move infinite 4.7s ease-in-out alternate;}
.cube:nth-child(24) > .move {animation: move infinite 2.6s ease-in-out alternate;}
.cube:nth-child(25) > .move {animation: move infinite 1.5s ease-in-out alternate;}

.left {
	position:absolute;
	width: 20vmin;
	height: 50vmin;
	background: #000;
	transform: translate(22.2vmin, 47vmin) rotate(90deg) skewX(-30deg);
}

.right {
	position:absolute;
	width: 55vmin;
	height: 20vmin;
	background: #000;
	transform: translate(47vmin, 61.7vmin) rotate(-30deg) skewX(-30deg);
}
</style>




</head>

<body translate="no" >
  <div class="ground">
  <div class="cube">
    <div class="move">
      <div class="face front"></div>
      <div class="face side"></div>
      <div class="face top"></div>
    </div>
  </div>
  <div class="cube">
    <div class="move">
      <div class="face front"></div>
      <div class="face side"></div>
      <div class="face top"></div>
    </div>
  </div>
  <div class="cube">
    <div class="move">
      <div class="face front"></div>
      <div class="face side"></div>
      <div class="face top"></div>
    </div>
  </div>
  <d.........完整代码请登录后点击上方下载按钮下载查看