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