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

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

代码语言：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% {
		transf.........完整代码请登录后点击上方下载按钮下载查看