css+js实现卡车卸货loading加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+js实现卡车卸货loading加载动画效果代码

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

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

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

    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'>
<style>
    *,*:before,*:after {
	border:0;
	box-sizing:border-box;
	margin:0;
	padding:0;
}
:root {
	font-size:20px;
}
body {
	background:#87beff;
	color:#222;
	font:1em "Anton",sans-serif;
	line-height:1.5;
	overflow-x:hidden;
}
/* all */.progress-container,.progress-state,.dump-truck,.dump-truck div {
	position:absolute;
}
/* progress */.progress-container,.progress-box {
	width:6em;
}
.progress-container {
	top:50%;
	left:calc(50% - 3em);
	height:7.5em;
	z-index:2;
}
.progress-box {
	border-radius:0 0 0.5em 0.5em;
	border:0.5em solid #505050;
	border-top:0;
	height:4em;
}
.progress-fill {
	animation:fillDirt 10s linear forwards;
	background:#643232;
	transform:scaleY(0);
	transform-origin:50% 100%;
	transition:transform 0.5s ease-out;
	width:100%;
	height:100%;
}
.progress-state {
	bottom:0;
	left:0;
	font-size:1.5em;
	text-align:center;
}
.state-load {
	animation:hideLoad 20s linear forwards;
}
.state-finish {
	animation:showFinish 0.3s 20s linear forwards;
	visibility:hidden;
}
/* trucks */.dump-truck {
	opacity:0;
	top:calc(50% - 4em);
	width:14em;
	height:8em;
}
.dump-truck:nth-of-type(2) {
	animation:backupL 10s ease-in-out 2 forwards;
	right:50%;
	transform:scaleX(-1) translateX(5em);
}
.dump-truck:nth-of-type(2) .bucket {
	animation:dump 10s linear 2;
}
.dump-truck:nth-of-type(2) .dirt {
	animation:rotateDirt 10s linear 2;
}
.dump-truck:nth-of-type(2) .dirt-spill {
	animation:pourDirt 10s linear 2;
}
.dump-truck:nth-of-type(2) .wheel {
	animation:spinL 10s ease-in-out 2;
}
.dump-truck:last-of-type {
	animation:backupR 10s 5s ease-in-out 2 forwards;
	left:50%;
	transform:translateX(5em);
}
.dump-truck:last-of-type .bucket {
	animation:dump 10s 5s linear 2;
}
.dump-truck:last-of-type .dirt {
	animation:rotateDirt 10s 5s linear 2;
}
.dump-truck:last-of-type .dirt-spill {
	animation:pourDirt 10s 5s linear 2;
}
.dump-truck:last-of-type .wheel {
	animation:spinR 10s 5s ease-in-out 2;
}
.front {
	background:linear-gradient(#ff3f30,#ff3f30) 2.7em 0.75em/0.2em 2em,linear-gradient(#a0a0a0,#a0a0a0) 1em 3.5em/0.8em 0.2em,linear-gradient(#505050,#505050) 3.3em 6.1em/0.5em 0.2em,linear-gradient(#505050,#505050) 3.3em 6.8em/0.5em 0.2em,linear-gradient(83deg,#282828 49%,rgba(40,40,40,0) 50%) 1em 0.75em/5em 2em,radial-gradient(3.4em 4.6em at 33% 100%,rgba(255,255,255,0) 49%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 59%,rgba(255,255,255,0) 60%),radial-gradient(3.4em 4.6em at 33% 100%,rgba(255,63,48,0) 49%,#ff3f30 50%);
	background-repeat:no-repeat;
	border-radius:10% 20% 5% 25% / 10% 50% 5% 100%;
	top:0.4em;
	left:10.1em;
	width:3.9em;
	height:7em;
}
.bucket {
	background:repeating-linear-gradient(95deg,rgba(0,0,0,0),rgba(0,0,0,0) 0.85em,rgba(0,0,0,0.15) 0.9em,rgba(0,0,0,0.15) 1.75em,rgba(0,0,0,0.15) 1.8em) 0.1em 1.6em/7.8em 3.2em,linear-gradient(#505050,#505050) 8em 0/2em 0.5em,linear-gradient(95deg,rgba(80,80,80,0) 0.45em,#505050 0.5em,#505050 1.45em,rgba(80,80,80,0) 1.5em) 7em 0/1.6em 5.5em,linear-gradient(rgba(80,80,80,0) 1em,#505050 1em) 0 0/7.5em 5.5em;
	background-repeat:no-repeat;
	border-radius:0 0 0 25% / 0 0 0 15%;
	top:0;
	left:0;
	width:10em;
	height:5.5em;
	transform:rotate(0deg);
	transform-origin:22% 100%;
}
.dirt {
	background:#643232;
	border-radius:0 0 50% 50% / 0 0 100% 100%;
	top:1.1em;
	left:-3.2em;
	width:7.4em;
	height:3em;
	transform:rotate(-25deg);
	transform-origin:50% 0;
	z-index:-1;
}
.dirt-spill {
	background:#643232;
	border-radius:0.4em;
	top:0;
	left:-5.25em;
	transform:rotate(-40deg) scale(1,1);
	transform-origin:5.25em 0.........完整代码请登录后点击上方下载按钮下载查看