svg航天飞机升空飞行动画效果代码-html代码-BFW代码库

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