css火箭发射飞行动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css火箭发射飞行动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        *,*:before,*:after {
        	box-sizing:border-box
        }
        body {
        	background:#1D1D1D;
        	padding:20px
        }
        .scene {
        	width:202px;
        	height:380px;
        	background:#1D1D1D;
        	-webkit-animation:vibration .2s infinite;
        	animation:vibration .2s infinite;
        	position:absolute;
        	margin:auto;
        	top:0;
        	left:-100px;
        	right:0;
        	bottom:0
        }
        .wing-left {
        	position:absolute;
        	z-index:10;
        	height:103px;
        	width:0;
        	padding:0;
        	top:82px;
        	left:16px;
        	transform:rotate(10deg) skew(5deg);
        	border-top:21px solid transparent;
        	border-right:38px solid #743388;
        	border-bottom:19px solid transparent
        }
        .wing-left:after {
        	content:"";
        	display:block;
        	position:absolute;
        	bottom:-50px;
        	height:0;
        	width:0;
        	border-top:20px solid transparent;
        	border-right:50px solid #1D1D1D;
        	border-bottom:50px solid transparent
        }
        .wing-right {
        	position:absolute;
        	z-index:10;
        	height:103px;
        	width:0;
        	padding:0;
        	top:62px;
        	right:17px;
        	transform:rotate(-10deg) skew(-5deg);
        	border-top:0 solid transparent;
        	border-right:40px solid #743388;
        	border-bottom:15px solid transparent
        }
        .wing-right:after {
        	content:"";
        	display:block;
        	position:absolute;
        	top:-33px;
        	left:-19px;
        	height:0;
        	width:0;
        	border-top:36px solid transparent;
        	border-right:68px solid #1D1D1D;
        	border-bottom:45px solid transparent
        }
        .exhaust {
        	position:absolute;
        	z-index:20;
        	top:156px;
        	left:51px;
        	height:0;
        	width:101px;
        	border-top:23px solid #743388;
        	border-left:9px solid transparent;
        	border-right:8px solid transparent
        }
        .capsule {
        	position:absolute;
        	z-index:30;
        	background:#1D1D1D;
        	left:46px;
        	top:5px;
        	width:111px;
        	height:156px;
        	opacity:1;
        	overflow:hidden
        }
        .capsule .base {
        	position:absolute;
        	background:#ccc;
        	width:112px;
        	height:94px;
        	top:62px;
        	left:0;
        	background:linear-gradient(to right,#F3F3F3 0,#F3F3F3 65%,#E0E0E0 65%,#E0E0E0 100%)
        }
        .capsule .top {
        	position:absolute;
        	height:0;
        	width:0;
        	padding:0;
        	left:0;
        	border-left:56px solid transparent;
        	border-right:56px solid transparent;
        	border-bottom:62px solid #F3F3F3
        }
        .capsule .top:after {
        	content:"";
        	position:absolute;
        	height:0;
        	width:0;
        	border-left:0 solid transparent;
        	border-right:156px solid transparent;
        	border-bottom:84px solid #1D1D1D;
        	transform:skew(42deg);
        	top:-14px;
        	left:25px;
        	z-index:50
        }
        .capsule .top .shadow {
        	position:absolute;
        	height:0;
        	width:0;
        	border-left:20px solid transparent;
        	border-right:80px solid transparent;
        	border-bottom:90px solid #E0E0E0;
        	transform:skew(26deg);
        	top:-20px;
        	left:-3px;
        	z-index:40
        }
        .window-big {
        	width:70px;
        	height:70px;
        	background:#743388;
        	border-radius:8em;
        	position:absolute;
        	z-index:40;
        	top:57px;
        	left:66px
        }
        .window-small {
        	width:44px;
        	height:44px;
        	background:#272425;
        	border-radius:8em;
        	position:absolute;
        	z-index:50;
        	top:70px;
        	left:79px
        }
        .propulsed__slow,.fire-4,.fire-3,.fire-2 {
        	-webkit-animation:fire_propulsion .3s ease-in infinite;
        	animation:fire_propulsion .3s ease-in infinite
        }
        .main_fire,.fire-1 {
        	-webkit-animation:main_fire .1s cubic-bezier(0.175,0.885,0.42,1.41) infinite;
        	animation:main_fire .1s cubic-bezier(0.175,0.885,0.42,1.41) infinite
        }
        .fire-1 {
        	position:absolute;
        	height:70px;
        	width:70px;
        	top:169px;
        	transform-origin:50% 50%;
        	transform:rotate(-40deg) skew(1deg,-11deg);
        	z-index:10;
        	left:64px;
        	background:linear-gradient(135deg,#EF8B32 0,#EF8B32 50%,#E82134 50%,#E82134 100%)
        }
        .fire-2 {
        	display:none;
        	position:absolute;
        	height:55px;
        	width:55px;
        	top:180px;
        	transform-origin:50% 50%;
        	transform:rotate(-33deg) skew(0deg,-30deg);
        	z-index:15;
        	left:58px;
        	background:linear-gradient(135deg,#E82134 0,#E82134 50%,#EF8B32 50%,#EF8B32 100%);
        	-webkit-animation-delay:.2s;
        	animation-delay:.2s
        }
        .fire-3 {
        	position:absolute;
        	height:22px;
        	width:22px;
        	top:196px;
        	left:58px;
        	transform-origin:50% 50%;
        	transform:rotate(-33deg) skew(0deg,-30deg);
        	z-index:20;
        	background:linear-gradient(135deg,#EF8B32 0,#EF8B32 50%,#E82134 50%,#E82134 100%);
        	-webkit-animation-delay:.2s;
        	animation-delay:.2s
        }
        .fire-4 {
        	position:absolute;
        	height:22px;
        	width:22px;
        	top:200px;
        	transform-origin:50% 50%;
        	transform:rotate(-33deg) skew(0deg,-30deg);
        	z-index:20;
        	left:126px;
        	background:linear-gradient(135deg,#E82134 0,#E82134 50%,#EF8B32 50%,#EF8B32 100%)
        }
        .propulsed,.spark-4,.spark-3,.spark-2,.spark-1 {
        	-webkit-animation:dancing_fire .24s infinite;
        	animation:dancing_fire .24s infinite
        }
        .spark-1 {
        	position:absolute;
        	bottom:177px;
        	z-index:20;
        	right:70px;
        	width:12px;
        	height:12px;
        	background:#EF8B32;
        	transform-origin:50% 50%
        }
        .spark-2 {
        	position:absolute;
        	bottom:147px;
        	z-index:20;
        	left:52px;
        	width:10px;
        	height:10px;
        	transform:rotate(45deg);
        	background:#EF8B32;
        	-webkit-animation-delay:.22s;
        	animation-delay:.22s
        }
        .spark-3 {
        	position:absolute;
        	bottom:90px;
        	z-index:20;
        	left:109px;
        	width:10px;
        	height:10px;
        	transform:rotate(45deg);
        	background:#E82134;
        	-webkit-animation-delay:.32s;
        	animation-delay:.32s
        }
        .spark-4 {
        	position:absolute;
        	bottom:20px;
        	left:83px;
        	z-index:20;
        	width:10px;
        	height:10px;
        	background:#EF8B32;
        	-webkit-animation-delay:.16s;
        	animation-delay:.16s
        }
        .hyperspace,.star {
        	-webkit-animation:hypersp.........完整代码请登录后点击上方下载按钮下载查看