TweenMax实现一个飞行的导弹效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax实现一个飞行的导弹效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<style>
body {
background-color: #061a21;
overflow: hidden;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
max-width: 100%;
height: 600px;
}
svg {
max-width: 100%;
visibility: hidden;
overflow: visible;
}
#bg {
width: 100%;
overflow: visible;
}
.bgSVG {
width: 100%;
}
</style>
</head>
<body>
<svg class="bgSVG" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:a="https://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600"
xml:space="preserve">
<defs>
</defs>
<linearGradient id="bgGrad" gradientUnits="userSpaceOnUse" x1="300" y1="0" x2="300" y2="600">
<stop offset="0" style="stop-color:#000000" />
<stop offset="1" style="stop-color:#061A21" />
</linearGradient>
<rect id="bg" fill="url(#bgGrad)" width="600" height="600" />
</svg>
<div class="container">
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In -->
<svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:a="https://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600"
xml:space="preserve">
<defs>
<filter id="flameShake">
<feTurbulence id="turbulence" baseFrequency="0.3 0.1" type="fractalNoise" stitchTiles="stitch" numOctaves="1" seed="0" />
<feDisplacementMap in="SourceGraphic" scale="23" />
<feGaussianblur stdDeviation="1.5">
</feGaussianblur>
<feColorMatrix id="flameHue" type="hueRotate" values="0" />
</filter>
<clipPath id="bodyMask">
<rect id="body" x="260" y="125" width="80" height="450" />
</clipPath>
<linearGradient id="bodyGrad" gradientUnits="userSpaceOnUse" x1="260" y1="350" x2="340" y2="350">
<stop offset="0" style="stop-color:#000000;stop-opacity:0.7" />
<stop offset="0.081" style="stop-color:#5C5C5C;stop-opacity:0.5" />
<stop offset="0.4" style="stop-color:#FFFFFF;stop-opacity:0" />
<stop offset="1" style="stop-color:#000000;stop-opacity:0.7" />
</linearGradient>
<radialGradient id="headGrad" cx="299" cy="121" r="40.6885" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#3d3d3d" />
<stop offset="0.7" style="stop-color:#000000" />
</radialGradient>
</defs>
<g id="speedLineGroup">
<line fill="none" x1="-134" y1="62.5" x2="586" y2="62.5" />
<line fill="none" x1="-190" y1="434.5" x2="436" y2="434.5" />
<line fill="none" x1="-518" y1="105.5" x2="592" y2="105.5" />
<line fill="none" x1="108" y1="515.5" x2="691" y2="515.5" />
<line fill="none" x1="-163" y1="375.5" x2="551" y2="375.5" />
<line fill="none" x1="-63" y1="105.5" x2="251" y2="105.5" />
<line fill="none" x1="-279" y1="127.5" x2="880" y2="127.5" />
<line fill="none" x1="-318" y1="306.5" x2="762" y2="306.5" />
<line fill="none" x1="-218" y1="6.5" x2="962" y2="6.5" />
</g>
<g id="missileShake">
<g id="missileGroup">
<use xlink:href="#body" fill="#000" />
<g id="barrelGroup" clip-path="url(#bodyMask)">
<rect x="260" y="135" fill="#BFBFBF" width="8" height="172" />
<rect x="278" y="135" fill="#BFBFBF" width="8" height="172" />
<rect x="242" y="135" fill="#BFBFBF" width="8" height="172" />
<rect x="296" y="135" fill="#BFBFBF" width="8" height="172" />
<rect x="314" y="135" fill="#BFBFBF" width="8" height="172" />
<rect x="332" y="135" fill="#BFBFBF" width="8" height="172" />
</g>
<rect id="bandBig" x="260" y="315.8" fill="#BFBFBF" width="80" height="30" />
<rect id="bandSmall" x="260" y="415.8" fill="#BFBFBF" width="80" height="10" />
<!--<rect id="bandThin" x="260" y="459.8" fill="#BFBFBF" width="80" height="2"/>-->
<g id="svgTextGroup" fill="#BFBFBF">
<path d="M305.9,395.1c0-1.3-0.6-1.7-1.5-1.7c-1.1,0-1.7,0.6-1.8,2.1l-0.6,5c-0.3,2.3-1.6,3.7-4.6,3.7
c-3.5,0-4.7-1.8-4.7-3.9v-8.3h3.1v8.5c0,1,0.4,1.6,1.5,1.6c0.9,0,1.4-0.4,1.6-2.1l0.6-4.7c0.3-2.4,1.5-4,4.8-4c2.8,0,4.8,1.1,4.8,4
v9h-3.1V395.1z" />
<path d="M292.6,372.9l13.2,4.1c2,0.6,3.5,1.5,3.5,3.2s-1.4,2.6-3.5,3.2l-13.2,4.1v-2.4l12.3-3.9
c0.7-0.2,1.1-0.5,1.1-1.1s-0.4-0.8-1.1-1.1l-12.3-3.9V372.9z" />
<path d="M300,356.3h9v8.1c0,3.7-2.8,4.9-8.2,4.9c-5.4,0-8.2-1.3-8.2-4.9v-8h3.3v8c0,2.4,1.7,2.7,4.8,2.7
c3.2,0,4.9-0.3,4.9-2.7v-6H300V356.3z" />
</g>
<g id="svgLogoGroup">
<path fill="#EDEDED" d="M300,455c-1.1,0-2.2-0.3-3-0.8c-1.5-1-1.7-2.5-0.4-3.5v-1.4l-1.6,1c-0.3,1.3-2.1,2.3-4.2,2.3
c-2.4,0-4.3-1.2-4.3-2.7c0-1.3,1.6-2.5,3.7-2.7l1.6-1h-2.3c-0.7,0.4-1.6,0.5-2.6,0.5c-1.1,0-2.2-0.3-3-0.8c-1.7-1-1.7-2.7,0-3.8
c0.8-0.5,1.9-0.8,3-0.8c0.9,0,1.8,0.2,2.6,0.5h2.3l-1.6-1c-2.1-0.2-3.7-1.3-3.7-2.7c0-1.5,1.9-2.7,4.3-2.7c2.2,0,3.9,1,4.2,2.3
l1.6,1v-1.4c-1.3-1-1.1-2.6,0.4-3.5c0.8-0.5,1.9-0.8,3-0.8c1.1,0,2.2,0.3,3,0.8c0.8,0.5,1.3,1.2,1.3,1.9c0,0.6-0.3,1.1-0.9,1.6v1.4
l1.6-1c0.3-1.3,2.1-2.3,4.2-2.3c2.4,0,4.3,1.2,4.3,2.7c0,1.3-1.6,2.5-3.7,2.7l-1.6,1h2.3c0.7-0.4,1.6-0.5,2.6-0.5
c1.1,0,2.2,0.3,3,0.8c1.7,1,1.7,2.7,0,3.8c-0.8,0.5-1.9,0.8-3,0.8c-0.9,0-1.8-0.2-2.6-0.5h-2.3l1.6,1c2.1,0.2,3.7,1.3,3.7,2.7
c0,1.5-1.9,2.7-4.3,2.7c-2.2,0-3.9-1-4.2-2.3l-1.6-1v1.4c0.6,0.5,0.9,1,0.9,1.6c0,0.7-0.4,1.4-1.3,1.9
C302.2,454.7,301.2,455,300,455z" />
<path fill="#A4A4A4" d="M300,434c0.8,0,1.5,0.2,2.1,0.5c1.1,0.7,1.1,1.9,0,2.6v3.8l4.3-2.7c0-1,1.3-1.8,2.9-1.8
c1.6,0,2.9,0.8,2.9,1.8c0,1-1.3,1.8-2.9,1.8l-4.3,2.7h6c0.6-0.4,1.3-0.5,2.1-0.5c0.8,0,1.5,0.2,2.1,0.5c1.1,0.7,1.1,1.9,0,2.6
c-0.6,0.4-1.3,0.5-2.1,0.5c-0.8,0-1.5-0.2-2.1-0.5h-6l4.3,2.7c1.6,0,2.9,0.8,2.9,1.8c0,1-1.3,1.8-2.9,1.8l0,0
c-1.6,0-2.9-0.8-2.9-1.8l-4.3-2.7v3.8c1.1,0.7,1.1,1.9,0,2.6c-0.6,0.4-1.3,0.5-2.1,0.5c-0.8,0-1.5-0.2-2.1-0.5
c-1.1-0.7-1.1-1.9,0-2.6v-3.8l-4.3,2.7c0,1-1.3,1.8-2.9,1.8l0,0c-1.6,0-2.9-0.8-2.9-1.8c0-1,1.3-1.8,2.9-1.8l4.3-2.7h-6
c-0.6,0.4-1.3,0.5-2.1,0.5c-0.8,0-1.5-0.2-2.1-0.5c-1.1-0.7-1.1-1.9,0-2.6c0.6-0.4,1.3-0.5,2.1-0.5c0.8,0,1.5,0.2,2.1,0.5h6
l-4.3-2.7c-1.6,0-2.9-0.8-2.9-1.8c0-1,1.3-1.8,2.9-1.8c1.6,0,2.9,0.8,2.9,1.8l4.3,2.7v-3.8c-1.1-0.7-1.1-1.9,0-2.6
C298.5,434.2,299.3,434,300,434 M300,432.4L300,432.4c-1.5,0-2.9,0.4-4,1c-1,0.6-1.5,1.4-1.6,2.2c-1-0.5-2.3-0.9-3.7-0.9
c-3.1,0-5.6,1.6-5.6,3.5c0,0.9,0.5,1.7,1.4,2.3c-1.4,0.1-2.6,0.4-3.6,1c-1.1,0.7-1.6,1.5-1.6,2.5s0.6,1.8,1.6,2.5
c1,0.6,2.2,1,3.6,1c-0.9,0.6-1.4,1.4-1.4,2.3c0,1.9,2.5,3.5,5.6,3.5c1.4,0,2.7-0.3,3.7-0.9c0.1,0.8,0.7,1.6,1.6,2.2
c1.1,0.7,2.5,1,4,1c1.5,0,2.9-0.4,4-1c1-0.6,1.5-1.4,1.6-2.2c1,0.5,2.3,0.9,3.7,0.9c1.5,0,2.9-0.4,4-1s1.6-1.5,1.6-2.5
c0-0.9-0.5-1.7-1.4-2.3c1.4-0.1,2.6-0.4,3.6-1c2.2-1.4,2.2-3.6,0-5c-1-0.6-2.2-1-3.6-1c.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0