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

代码语言：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;
	opacity:0;
}
.demo.s--processing .demo__drone-cont--takeoff {
	opacity:1;
	-webkit-transform:translateY(-70px);
	transform:translateY(-70px);
	transition:opacity 0.2s,-webkit-transform 0.8s;
	transition:transform 0.8s,opacity 0.2s;
	transition:transform 0.8s,opacity 0.2s,-webkit-transform 0.8s;
	transition-delay:1.2s;
}
.demo.s--processing .demo__drone-cont--shift-x {
	transition:-webkit-transform 2.6s 2.4s;
	transition:transform 2.6s 2.4s;
	transition:transform 2.6s 2.4s,-webkit-transform 2.6s 2.4s;
	-webkit-transform:translateX(213px);
	transform:translateX(213px);
}
.demo.s--processing .demo__drone-cont--landing {
	-webkit-transform:translateY(24px);
	transform:translateY(24px);
	transition:-webkit-transform 0.3s 5s;
	transition:transform 0.3s 5s;
	transition:transform 0.3s 5s,-webkit-transform 0.3s 5s;
}
.demo__drone {
	position:absolute;
	left:16px;
	top:-12px;
	width:68px;
	height:56px;
	stroke:#000;
	stroke-width:2px;
	fill:none;
}
@-webkit-keyframes tiltAnim {
	8%,24% {
	-webkit-transform:rotate(0);
	transform:rotate(0);
}
35%,70% {
	-webkit-transform:rotate(8deg);
	transform:rotate(8deg);
}
85% {
	-webkit-transform:rotate(-4deg);
	transform:rotate(-4deg);
}
95%,100% {
	-webkit-transform:rotate(0);
	transform:rotate(0);
}
}@keyframes tiltAnim {
	8%,24% {
	-webkit-transform:rotate(0);
	transform:rotate(0);
}
35%,70% {
	-webkit-transform:rotate(8deg);
	transform:rotate(8deg);
}
85% {
	-webkit-transform:rotate(-4deg);
	transform:rotate(-4deg);
}
95%,100% {
	-webkit-transform:rotate(0);
	transform:rotate(0);
}
}.demo.s--processing .demo__drone {
	-webkit-transform-origin:50% 100%;
	transform-origin:50% 100%;
	-webkit-animation:tiltAnim 3.8s 1.2s;
	animation:tiltAnim 3.8s 1.2s;
}
.demo.s--processing .demo__drone-leaving {
	-webkit-transform:translate(150px,-150px) rotate(20deg) scale(0.3);
	transform:translate(150px,-150px) rotate(20deg) scale(0.3);
	opacity:0;
	transition:opacity 0.55s 6.05s,-webkit-transform 1.1s 5.5s;
	transition:transform 1.1s 5.5s,opacity 0.55s 6.05s;
	transition:transform 1.1s 5.5s,opacity 0.55s 6.05s,-webkit-transform 1.1s 5.5s;
}
.demo__drone-arm {
	--rotation:0deg;
	-webkit-transform-origin:68px 56px;
	transform-origin:68px 56px;
	-webkit-transform:rotate(var(--rotation));
	transform:rotate(var(--rotation));
}
.demo__drone-arm--2 {
	-webkit-transform:scaleX(-1) rotate(var(--rotation));
	transform:scaleX(-1) rotate(var(--rotation));
}
.demo.s--processing .demo__drone-arm {
	--rotation:25deg;
	transition:-webkit-transform 0.3s 5.2s;
	transition:transform 0.3s 5.2s;
	transition:transform 0.3s 5.2s,-webkit-transform 0.3s 5.2s;
}
.demo__drone-green {
	fill:#61d4f1;
}
.demo.s--processing .demo__drone-green {
	fill:#53e2c2;
	transition:fill 1s 4.6s;
}
.demo__drone-yellow {
	fill:#ecb400;
}
@-webkit-keyframes revertAnim {
	40%,45% {
	-webkit-transform:translate(-426px,0);
	transform:translate(-426px,0);
}
75% {
	-webkit-transform:translate(-426px,-100px);
	transform:translate(-426px,-100px);
}
100% {
	-webkit-transform:translate(-426px,100px);
	transform:translate(-426px,100px);
}
}@keyframes revertAnim {
	40%,45% {
	-webkit-transform:translate(-426px,0);
	transform:translate(-426px,0);
}
75% {
	-webkit-transform:translate(-426px,-100px);
	transform:translate(-426px,-100px);
}
100% {
	-webkit-transform:translate(-426px,100px);
	transform:translate(-426px,100px);
}
}.demo.s--reverting .demo__drone-package {
	opacity:0;
	transition:opacity 0s 2s;
	-webkit-animation:revertAnim 2s;
	animation:revertAnim 2s;
}
.demo__circle {
	position:absolute;
	left:30px;
	top:50%;
	width:40px;
	height:40px;
	margin-top:-20px;
	border-radius:50%;
	background:#3dc1da;
}
.demo.s--processing .demo__circle {
	background-color:#53e2c2;
	transition:background-color 1s;
	transition-delay:4.6s;
}
.demo.s--reverting .demo__circle {
	background-color:#3dc1da;
	transition:background-color 0.5s 0.96s;
}
.demo__circle-inner {
	overflow:hidden;
	position:absolute;
	left:0;
	top:0;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
	border-radius:inherit;
}
.demo__circle-package {
	width:14px;
	height:18px;
	stroke:#fff;
	stroke-width:3px;
	stroke-linecap:round;
}
.demo.s--processing .demo__circle-package {
	-webkit-transform:translateY(-70px);
	transform:translateY(-70px);
	transition:-webkit-transform 0.8s 1.2s;
	transition:transform 0.8s 1.2s;
	transition:transform 0.8s 1.2s,-webkit-transform 0.8s 1.2s;
}
.demo.s--reverting .demo__circle-package {
	-webkit-transform:translateY(0);
	transform:translateY(0);
	transition:-webkit-transform 0.16s 1.6s;
	transition:transform 0.16s 1.6s;
	transition:transform 0.16s 1.6s,-webkit-transform 0.16s 1.6s;
}
.demo__circle-grabbers {
	--grabY:0px;
	--grabRotate:0;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.demo__circle-grabbers:before,.demo__circle-grabbers:after {
	content:'';
	position:absolute;
	right:5px;
	top:-12px;
	width:14px;
	height:8px;
	border:2px solid #000;
	border-left:none;
	border-bottom:none;
	-webkit-transform:translateY(var(--grabY)) rotate(var(--grabRotate));
	transform:translateY(var(--grabY)) rotate(var(--grabRotate));
	transition:-webkit-transform 0.8s;
	transition:transfor.........完整代码请登录后点击上方下载按钮下载查看