<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TweenMax.js SVG 飞碟/UFO不明漂浮物</title>
<style>
body {
background-color: #00001a;
overflow: hidden;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
max-width: 100%;
height: 600px;
}
svg {
max-width: 100%;
}
</style>
</head>
<body>
<script src="js/TweenMax.min.js"></script>
<div class="container">
<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="glow" y="-50%" height="200%">
<feGaussianBlur stdDeviation="5 5" result="coloredBlur" />
<feOffset dx="0" dy="0" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#E9CD08" flood-opacity="0"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g class="speedLineGroup" stroke-width="2">
<line fill="none" stroke="#2A4060" x1="71.3" y1="341.3" x2="424.3" y2="341.3" />
<line fill="none" x1="288.3" y1="143.3" x2="478.3" y2="143.3" />
<line fill="none" stroke="#6F83B7" x1="71.3" y1="45.3" x2="362.3" y2="45.3" />
<line fill="none" stroke="#7285BE" x1="229.3" y1="262.3" x2="588.3" y2="262.3" />
<line fill="none" stroke="#3F3007" x1="25.3" y1="291.3" x2="569.3" y2="291.3" />
<line fill="none" stroke="#1F7A60" x1="145.3" y1="113.3" x2="545.3" y2="113.3" />
</g>
<g class="spotlightHover">
<polygon class="beam" opacity="0.1" fill="#67D5D4" points="338.7,237.3 262,237.3 232.9,444 365.8,444 " />
<ellipse class="spotlight" opacity="1" fill="#E9CD08" cx="299.4" cy="444" rx="66.5" ry="22.1" />
</g>
<path class="cow" filter="url(#glow)" d="M325.6,430.2l-2.6-2.5c0.9,0,1.9,0.3,2.7-0.2c1.3-0.9,1.6-1.9,0.9-1.6c-0.1,0-0.3,0.1-0.4,0.2
c-1.9,0.8-3.8-0.9-5.9-0.8c-0.4,0.2-0.9,0.4-0.9,0.9c-0.1,0.5,0.5,0.7,0.4,1.3c-1.2-0.1-1.8-1.5-3-0.8c-0.3,0.2-0.9,0.8-0.5,1.4
c0.2,0.4,1.1,0.3,1.5,0.6c-0.1,0.3-0.2,0.5-0.7,0.5c-0.3,0-0.6,0-1,0.1l-6.4,0.4c-2.8,0.2-5.6,0.4-8.4,0.6c-2.8,0.2-5.5,0.8-8.4,0.6
c-2.7-0.1-5.5-0.4-8.3-0.6c-2.7-0.2-5.8-0.9-7.7,0.6c-1.3,0.9-1.1,1.1-1.6,1.9c-0.2,0.3-0.2,0.3-0.5,0.7c-0.6,1.1-1.2,6.5-1.2,7.8
c0.2,5.1-1,3.1-1.7,4.7c-0.8,1.9,0.5,4,0.6,5.8c0.5-0.2,0.9-1,0.9-1.8c-0.1-2.5,1.4-2.4,1.6-3.9c0.1-1.1-0.6-0.6-0.4-1.9
c0.4-2.2,0.5-8,1.2-9.4l-0.2,6.6c0,0.9-0.1,2.3,0.2,3.3c0.2,0.9,1,1.3,1,2.3c-0.2,0.2-0.5,0.2-0.7,0.5c-0.2,0.2-0.5,0.4-0.6,0.5
c-0.3,0.5-0.6,1.1-0.5,1.8c0.1,0.9,0.5,2,0.7,4c0.2,1.5,0.2,3,0,4.5c-0.1,0.3-0.2,0.8,0,1.1c0.2,0.5,0.3,0.3,0.5,0.5
c0.5,0.5-0.4,0.9-0.4,1.6c0.2,0.5,2.8,1.8,4,1.2c0.7-0.4,0.5-1.2,0-1.8c-1.6-1.6-1.5-4.4-1.2-6.5c0.1-0.9,0.7-3.3,1.5-3.9
c1.4,1.5,2.3,5.5,2.3,8.1c0,0.1,0.6,0.4,1.2,0.9c1.1,1.2,0.8,1.9,2.3,1.9c0.7,0,1.2,0,1.7-0.4c-0.1-0.8-0.7-1.4-1.1-1.9
c-0.3-0.4-0.9-1.2-1.2-1.7c-0.6-1.2-1.1-3.4-0.5-4.8l0.7-0.1l0.3,0.5c0.2,0.2,0.3,0.3,0.5,0.4c0.2-0.2,0.4-0.5,0.5-0.9l1-0.1
c0.2,0.5,0.5,0.9,0.8,1c0.7-0.5,0.2-1.1,0.8-1.5c0.1-0.1,0.2-0.1,0.3-0.2c0.6-0.4,1-0.6,1.5-1.2c0.2-0.4,0.5-0.9,0.7-1.1
c3.2,0,4.2,0.2,7.9,0c0.6-0.1,1.2-0.1,1.9-0.2c0.7-0.1,1.2-0.2,1.6,0.2c0.5,0.8,0.5,2.4,0.2,3.3c-0.7,1.6-0.2,1.5,0.3,2.1
c0.6,1,0.9,3.1,0.6,4.1c-0.3,0.9-0.2,0.7,0.4,1.2c0.5,0.5,0.5,0.8,0.9,1.2c0.5,0.5,1.6,0.8,2.3,0.7c0.2,0,0.4,0,0.5-0.1
c0.4-0.2,0.2,0,0.3-0.2c0.4-0.9-0.9-1.1-1.2-1.6c-0.2-0.3-1.6-6.1,0.1-7.6c0.2,0.2,0.2,0.6,0.2,0.9c0.1,1.4,0.5,1.3,0.9,2.2
c0.9,1.7,0.2,4.3,1.2,5.1c0.9,0.6,1.8,1.6,2.4,1.8c0.5,0.2,1.3,0.1,1.7-0.2c0.2-1.1-1.8-1.2-2.6-4.9c-0.3-1.6-0.3-5.2,0-6.9
c0.2-0.2,0.6,0,0.9-0.1c1.8-0.1,2.6-3,3.2-4.4c0.9-2.6,1.6-4,3.1-5.5c2.7-2.9,3.3-1.1,6.4-2.3c4.7-1.8,4.1-0.2,4.9-1.6
c0.4-0.5,0.8-0.5,1.1-1c0.2-0.7-1.9-2.3-2.5-3L325.6,430.2z" />
<g class="ship">
<g class="shipRotation">
<circle class="light" fill="#1d1d1d" cx="402.3" cy="191.5" r="4" />
<circle class="light" fill="#1d1d1d" cx="206.3" cy="187.5" r="4" />
<path fill="#6521C3" d="M431.5,217.6C417.3,239,363.8,255,300,255s-117.3-16-131.5-37.4c-0.1,0.7-0.1,1.4-0.1,2.1
c0,27,58.9,48.9,131.7,48.9s131.7-21.9,131.7-48.9C431.7,219,431.6,218.3,431.5,217.6z" />
<path fill="#7737EB" d="M300,255c63.8,0,117.3-16,131.5-37.4c-2-17.1-27.6-31.9-65.1-40c1.2,3.1,2.2,6.3,2.9,9.6
c-18.2,10.8-42.1,17.2-68.2,17.2c-26.1,0-50-6.5-68.3-17.2c0.8-3.5,1.8-6.8,3.1-10.1c-38.8,8-65.5,23.1-67.5,40.6
C182.7,239,236.2,255,300,255z" />
<path class="alien" fill="#5E2121" d="M300.1,170.7c-0.9,0-1.4,0.5-1.4,1.4c0,0.9,0.5,1.4,1.4,1.4c0.9,0,1.4-0.5,1.4-1.4
C301.5,171.1,301,170.7,300.1,170.7z M300.1,170.7c-0.9,0-1.4,0.5-1.4,1.4c0,0.9,0.5,1.4,1.4,1.4c0.9,0,1.4-0.5,1.4-1.4
C301.5,171.1,301,170.7,300.1,170.7z M327.2,174.9c-2.2-2.4-4.4-4.5-7.2-6.3c0.5-0.9,1-1.9,1.1-3c0.1-1.6-0.2-3.2-1-4.7
c-0.7-1.3-1.6-2.4-2.7-3.2c0.1-0.2,0.1-0.5,0.1-0.7c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3c0,1.7,1.4,3,3,3c0.9,0,1.8-0.4,2.3-1.1
c1.2,1.8,1.8,3.6,1.8,5.4c0,1-0.2,2-0.6,2.9c-6-3.3-12.2-5-18.7-5c-6.6,0-12.8,1.6-18.7,4.9c-0.4-1-0.6-2-0.6-3c0-2,0.6-3.8,1.8-5.3
c0.5,0.7,1.4,1.2,2.4,1.2c1.7,0,3-1.3,3-3c0-1.7-1.3-3-3-3c-1.7,0-3,1.3-3,3c0,0.3,0,0.6,0.1,0.8l-1,1c-1.3,1.4-2.1,2.4-2.3,3
c-0.4,1-0.6,2.1-0.6,3.1c0,1.2,0.3,2.4,0.9,3.5c-2.7,1.8-5.2,4-7.4,6.5c7.1,7.9,15.2,13.3,26.2,13.8v2.9c-3,0.8-5.7,2.6-7.8,6.3
c-1.1,2-1.7,4.1-2.1,6c4.4,0.4,8.9,0.6,13.5,0.6c3.3,0,6.6-0.1,9.8-0.3c-0.5-2.2-1.5-4.6-2.7-6.7c-2-3.7-4.8-5.1-7.8-6v-2.9
C311.3,188.3,319.9,182.9,327.2,174.9z M300.2,167.2c3.2,0,4.8,1.6,4.8,4.8c0,3.2-1.6,4.8-4.8,4.8c-3.3,0-4.9-1.6-4.9-4.8
C295.3,168.8,296.9,167.2,300.2,167.2z M299.3,184.3c-3.2,0-6.3-0.3-8.9-0.8c-4-0.8-6.2-2-6.2-3.7v-0.4c0,0.9,2.3,1.4,5.1,2.1
c2.8,0.6,6.4-0.3,10.4-0.3c2.5,0,5.5,1,8.2,0.6c4-0.6,5.1-1.2,6-2.2l0.1,0.2c0,1-0.3,2.1-1.5,2.6C309.6,183.8,305,184.3,299.3,184.3
z M300.1,173.4c0.9,0,1.4-0.5,1.4-1.4c0-0.9-0.5-1.4-1.4-1.4c-0.9,0-1.4,0.5-1.4,1.4C298.7,172.9,299.2,173.4,300.1,173.4z" />
<path fill="#7CD8FF" opacity="0.7" d="M301.1,204.3c26.1,0,50-6.5,68.2-17.2c-0.7-3.3-1.7-6.5-2.9-9.6c-10-26.4-35.4-45.1-65.3-45.1
c-29.7,0-55,18.5-65.2,44.6c-1.3,3.3-2.3,6.6-3.1,10.1C251.1,197.8,275,204.3,301.1,204.3z" />
<path fill="#56C4FF" opacity="0.7" d="M343,191.8c4.8-1.8,9.2-3.9,13.3-6.3c-5.2-23.7-26.2-41.6-51.4-42C322.8,150.1,337.1,168.3,343,191.8z" />
<circle class="light" fill="#1d1d1d" cx="198.3" cy="207.5" r="4" />
<circle class="light" fill="#1d1d1d" cx="233.3" cy="223.5" r="4" />
<circle class="light" fill="#1d1d1d" cx="277.3" cy="231.5" r="4" />
<circle class="light" fill="#1d1d1d" cx="323.3" cy="234.5" r="4" />
<circle class="light" fill="#1d1d1d" cx="366.3" cy="224.5" r="4" />
<circle class="light" fill="#1d1d1d" cx="402.3" cy="207.5" r="4" />
</g>
</g>
</svg>
</div>
<script src='js/DrawSVGPlugin.js?r=12'></script>
<script>
var xmlns = "http://www.w3.org/2000/svg",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
container = select('.container'),
ship = select('.ship'),
sh
TweenMax.js + SVG 实现的飞碟UFO不明飞行物动画效果源码.zip
版权申诉
27 浏览量
2022-11-01
00:09:02
上传
评论
收藏 38KB ZIP 举报
TweenMax.js + SVG 实现的飞碟UFO不明飞行物动画效果源码.zip （3个子文件） 
132687025067025851 
index.html 11KB js 
DrawSVGPlugin.js 3KB TweenMax.min.js 96KB资源评论
