svg+css实现订单结算提交无人机配送动画效果代码-html代码-BFW代码库

svg+css实现订单结算提交无人机配送动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现订单结算提交无人机配送动画效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
<style>
    @charset "utf-8";
	*,*:before,*:after {
	box-sizing:border-box;
	margin:0;
	padding:0;
}
body {
	font-family:'Roboto',Helvetica,Arial,sans-serif;
	overflow:hidden;
	display:flex;
	justify-content:center;
	align-items:center;
	height:100vh;
	background-color:#2D2D2D;
}
.demo {
	position:relative;
	width:300px;
	height:64px;
	padding-left:70px;
	padding-right:15px;
	border-radius:10px;
	background:#61d4f1;
	transition:background-color 1s;
	cursor:pointer;
}
.demo:before,.demo:after {
	content:'';
	position:absolute;
	left:5%;
	bottom:100%;
	width:14%;
	height:6px;
	background:#3dc1da;
	-webkit-transform:scaleX(0);
	transform:scaleX(0);
	-webkit-transform-origin:0 100%;
	transform-origin:0 100%;
}
.demo:after {
	left:19%;
	width:66%;
}
.demo.s--processing {
	background-color:#53e2c2;
	transition-delay:4.6s;
}
.demo.s--processing:before,.demo.s--processing:after {
	-webkit-transform:scaleX(1);
	transform:scaleX(1);
	background-color:#36d09d;
}
.demo.s--processing:before {
	transition:background-color 1s 4.6s,-webkit-transform 0.6s 1.2s;
	transition:transform 0.6s 1.2s,background-color 1s 4.6s;
	transition:transform 0.6s 1.2s,background-color 1s 4.6s,-webkit-transform 0.6s 1.2s;
}
.demo.s--processing:after {
	transition:background-color 1s 4.6s,-webkit-transform 2.4169014085s 2.4s;
	transition:transform 2.4169014085s 2.4s,background-color 1s 4.6s;
	transition:transform 2.4169014085s 2.4s,background-color 1s 4.6s,-webkit-transform 2.4169014085s 2.4s;
}
.demo.s--reverting {
	background-color:#61d4f1;
	transition:background-color 0.8s 0.8s;
}
.demo.s--reverting:before {
	-webkit-transform:scaleX(0) scaleY(0);
	transform:scaleX(0) scaleY(0);
	opacity:0;
	transition:opacity 0.3s 0.6s,-webkit-transform 0.2s 0.75s;
	transition:transform 0.2s 0.75s,opacity 0.3s 0.6s;
	transition:transform 0.2s 0.75s,opacity 0.3s 0.6s,-webkit-transform 0.2s 0.75s;
}
.demo.s--reverting:after {
	-webkit-transform:scaleX(0);
	transform:scaleX(0);
	opacity:0;
	transition:opacity 0.3s 0.6s,-webkit-transform 0.75s;
	transition:transform 0.75s,opacity 0.3s 0.6s;
	transition:transform 0.75s,opacity 0.3s 0.6s,-webkit-transform 0.75s;
}
.demo svg {
	overflow:visible;
	fill:none;
	stroke-linejoin:round;
}
.demo-transitionend-listener {
	transition:opacity 6.6s;
}
.demo.s--processing .demo-transitionend-listener {
	opacity:0;
}
.demo__drone-cont {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.demo__drone-cont--takeoff {
	z-index:-1;.........完整代码请登录后点击上方下载按钮下载查看