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

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

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