svg+TweenMax实现太空飞船loading加载效果代码-html代码-BFW代码库

svg+TweenMax实现太空飞船loading加载效果代码

代码语言：html

代码描述：svg+TweenMax实现太空飞船loading加载效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
body {
 background-color: #000;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width:100%;
 height: 100%;
 visibility: hidden;
 
}
</style>

 

</head>

<body >
  <svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
  <defs>
   <path id="rocketPath" d="M300,80c121.5,0,220,98.5,220,220S421.5,520,300,520,80,421.5,80,300,178.5,80,300,80" fill="none" stroke="#e7dece" stroke-miterlimit="10"/>
  <filter id="glow" x="-100%" y="-100%" width="250%" height="250%">
    <feGaussianBlur stdDeviation="15" result="coloredBlur" />
    <feOffset dx="0" dy="0" result="offsetblur"></feOffset>
    <feFlood id="glowAlpha" flood-color="#41C2F4" flood-opacity="0.71"></feFlood>
    <feComposite in2="offsetblur" operator="in"></feComposite>
    <feMerge>
      <feMergeNode/>          
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>   
   <circle class="dot" cx="0" cy="0" r="4" fill="red"/>
     <radialGradient id="dotGrad" cx="0" cy="0" r="33" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style=.........完整代码请登录后点击上方下载按钮下载查看