svg航天飞机升空飞行动画效果代码
代码语言：html
所属分类：动画
代码描述：svg航天飞机升空飞行动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body{
background:#222;
}
svg{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
max-width:400px;
}
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 1024 1024">
<svg xmlns='http://www.w3.org/2000/svg' height='100%' width='100%'>
<filter id='space'>
<feTurbulence baseFrequency='0.07' numOctaves='4' seed='1' />
<feColorMatrix values='0.3 -4.8 2.6 -5 -1.5 0.5 3.1 -4.2 1 -4 3.7 -2.4 -0.3 -4 -3.7 -4.4 3.9 -4.9 -0.6 4.7' />
</filter>
<rect width="200%" height="200%" filter='url(#space)' />
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<path fill="orange" d="M 553.6 776.9 c -10.8 14 -11 29.8 -5.4 43.9 c -12 -11.8 -18.7 -26.2 -14.1 -40.9 c 0.6 -1.9 1 -3.7 1.2 -5.5 l 0.1 -2.2 l -0.7 -0.2 l -2.9 6.5 c -4.1 11 -4.6 22.8 -0.7 34.8 c 7.9 23.4 -2.4 46.4 -21.2 64.9 c 8.7 -22.3 7.9 -47.7 -9.7 -70.3 c -3.4 -4.3 -6.2 -8.7 -8.4 -13.1 l -1.3 -3 l 0.1 0.8 c 3.5 15.1 -4.2 28.8 -17.1 39.2 c 6.7 -13.4 7.7 -29.3 -2 -44.4 c -8.1 -15.6 -10.2 -35 -3.9 -49.4 c 9.9 -20.8 23.2 -30.4 41.1 -30.8 c 2.6 0 5.3 0.1 8 0.4 c 14.6 1.5 33 8.7 38.8 25.7 c 5.8 14.5 8.6 29.5 -2.3 43.7 z" />
<animate attributeName="x" dur="1.3" values="-2%;-3%;-2%" repeatCount="indefinite" begin="-0.9s" />
<animate attributeName="y" dur="1.0" values="0%;2%;0%" repeatCount="indefinite" begin="-1.1s" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<path fill="rgb(255,215,0)" d="M 558.2 769.2 c -9.7 12.6 -9.9 26.8 -4.9 39.5 c -10.8 -10.6 -16.8 -23.6 -12.7 -36.8 c 0.5 -1.7 0.9 -3.3 1.1 -5 l 0.1 -2 l -0.6 -0.2 l -2.6 5.9 c -3.7 9.9 -4.1 20.5 -0.6 31.3 c 7.1 21.1 -2.2 41.8 -19.1 58.4 c 7.8 -20.1 7.1 -42.9 -8.7 -63.3 c -3.1 -3.9 -5.6 -7.8 -7.6 -11.8 l -1.2 -2.7 l 0.1 0.7 c 3.1 13.6 -3.8 25.9 -15.4 35.3 c 6 -12.1 6.9 -26.4 -1.8 -40 c -7.3 -14 -9.2 -31.5 -3.5 -44.5 c 8.9 -18.7 20.9 -27.4 37 -27.7 c 2.3 0 4.8 0.1 7.2 0.4 c 13.1 1.4 29.7 7.8 34.9 23.1 c 5.2 13.1 7.7 26.6 -2.1 39.3 z" />
<animate attributeName="x" dur="1.1" values="-3%;-4%;-3%" repeatCount="indefinite" begin="-1.2s" />
<animate attributeName="y" dur="1.0" values="0%;2%;0%" repeatCount="indefinite" begin="-9s" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px">
<g>
<path style="fill:#5DACD8" d="M265.774,338.698l66.074,126.572l104.113-28.057l-14.551-84.05 c-5.342-30.765-21.946-55.559-43.89-65.531c-2.493-1.136-4.918-2.459-7.259-3.952c-23.235-14.856-38.413-46.893-38.413-82.575 M180.185,201.106l35.551,103.42l-35.551,160.743l-32.952-8.873l-71.188-19.185l14.572-84.051 c5.333-30.755,21.931-55.554,43.875-65.525c2.514-1.135,4.931-2.465,.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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