<!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>HTML5 GSAP星球大战BB8机器人逃亡动画</title>
<style>
#header {
height: 90vh;
}
.artwork {
position: relative;
max-height: 90%;
margin: 20px 0;
opacity: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
</style>
</head>
<body>
<section id="header">
<svg class="artwork" data-bb8="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 2935 2935" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id="path-1" data-bb8="largeMask" cx="1467.5" cy="1467.5" r="1467.5"></circle>
<path id="path-3" d="M0 10h3378v1068H0z"></path>
<mask id="mask-4" width="3378" height="1068" x="0" y="0" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<lineargradient id="linearGradient-5" x1="50%" x2="50%" y1="0%" y2="65.101%">
<stop stop-color="#9B775B" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#BE9371" stop-opacity=".742" offset="52.792%"></stop>
<stop stop-color="#CA9D79" offset="99.968%"></stop>
</lineargradient>
<circle id="path-6" cx="412" cy="412" r="412"></circle>
<path id="path-8" d="M-488.933-686.737h1860.777V1174.04H-488.933z"></path>
<mask id="mask-9" width="1860.777" height="1860.777" x="0" y="0" fill="white">
<use xlink:href="#path-8"></use>
</mask>
<lineargradient id="linearGradient-10" x1="48.662%" x2="48.662%" y1="36.666%" y2="87.375%">
<stop stop-color="#000000" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#000000" offset="100%"></stop>
</lineargradient>
<circle id="path-11" cx="412.747" cy="412.128" r="412"></circle>
<path id="path-13" d="M264 370.683c244.5 0 241.808-41.645 241.808-41.645s13.634-2.917 14.683-7.156c4.91-19.82 7.51-40.528 7.51-61.835C528 116.427 409.803 0 264 0S0 116.427 0 260.047c0 21.157 2.565 41.724 7.405 61.415 1.764 7.177 19.336.646 21.69 7.576 2.355 6.93-9.596 41.645 234.905 41.645z"></path>
<path id="path-15" d="M0 7h1174v66H0z"></path>
<mask id="mask-16" width="1174" height="66" x="0" y="0" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<rect id="path-17" width="42" height="12" x="312" y="18" rx="6"></rect>
<mask id="mask-18" width="42" height="12" x="0" y="0" fill="white">
<use xlink:href="#path-17"></use>
</mask>
<rect id="path-19" width="42" height="12" x="312" y="36" rx="6"></rect>
<mask id="mask-20" width="42" height="12" x="0" y="0" fill="white">
<use xlink:href="#path-19"></use>
</mask>
<path id="path-21" d="M61 0h884v36H61z"></path>
<mask id="mask-22" width="884" height="36" x="0" y="0" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<path id="path-23" d="M0 51h1060v16H0z"></path>
<mask id="mask-24" width="1060" height="16" x="0" y="0" fill="white">
<use xlink:href="#path-23"></use>
</mask>
<lineargradient id="linearGradient-25" x1="50%" x2="50%" y1="0%" y2="61.269%">
<stop stop-color="#7F7268" offset="0%"></stop>
<stop stop-color="#35240B" offset="100%"></stop>
</lineargradient>
<path id="path-26" d="M458.955 92h-87.96c-5.51 0-9.995 4.475-9.995 9.994v47.012c0 5.52 4.475 9.994 9.995 9.994h144.96c-30.5-8.378-53.546-34.758-57-67z"></path>
<mask id="mask-27" width="154.954" height="67" x="0" y="0" fill="white">
<use xlink:href="#path-26"></use>
</mask>
<path id="path-28" d="M287.955 92H9.995C4.485 92 0 96.475 0 101.994v47.012C0 154.526 4.475 159 9.995 159h334.96l-57-67z"></path>
<mask id="mask-29" width="344.954" height="67" x="0" y="0" fill="white">
<use xlink:href="#path-28"></use>
</mask>
<path id="path-30" d="M632.244 93H813.99c5.528 0 10.01 4.482 10.01 10.003v92.994c0 5.524-4.478 10.003-10.01 10.003H619.01c-5.528 0-10.01-4.482-10.01-10.003v-57.112c12.396-11.952 20.856-27.96 23.244-45.885z"></path>
<mask id="mask-31" width="215" height="113" x="0" y="0" fill="white">
<use xlink:href="#path-30"></use>
</mask>
<path id="path-32" d="M872.244 93h181.746c5.528 0 10.01 4.482 10.01 10.003v92.994c0 5.524-4.478 10.003-10.01 10.003H859.01c-5.528 0-10.01-4.482-10.01-10.003v-57.112c12.396-11.952 20.856-27.96 23.244-45.885z"></path>
<mask id="mask-33" width="215" height="113" x="0" y="0" fill="white">
<use xlink:href="#path-32"></use>
</mask>
<lineargradient id="linearGradient-34" x1="50%" x2="50%" y1="13.3%" y2="100%">
<stop stop-color="#000000" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#000000" offset="100%"></stop>
</lineargradient>
<path id="path-35" d="M264 370.683c244.5 0 241.808-41.645 241.808-41.645s13.634-2.917 14.683-7.156c4.91-19.82 7.51-40.528 7.51-61.835C528 116.427 409.803 0 264 0S0 116.427 0 260.047c0 21.157 2.565 41.724 7.405 61.415 1.764 7.177 19.336.646 21.69 7.576 2.355 6.93-9.596 41.645 234.905 41.645z"></path>
<ellipse id="path-37" cx="54.36" cy="54.36" rx="54.36" ry="54.36"></ellipse>
</defs>
<g id="comp" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="artwork" mask="url(#mask-2)">
<g id="background">
<g id="sky" transform="translate(-199 -115)">
<use fill="#DDBE9A" stroke="#979797" stroke-width="2" mask="url(#mask-4)" xlink:href="#path-3"></use>
<path id="clouds" fill="#E0C39F" d="M385.2 669.795c5.423-1.59 458.03-283.254 462.624-266.534 148.17-11.437 137.33-19.674 130.025-21.598 5.576 18.858 9.566 22.728 12.03 27.448 6.002 11.49 13.082 22.663 16.767 35.092 2.817 9.503 6.612 20.652 2.423 29.634-5.173 11.092-17.774 16.908-27.56 24.26-239.206 9.69-224.056 117.825-169.642 105.166 73.37-17.068 3.16 2.7 31.584-19.468 33.838-7.37 58.542-16.864 83.86-24.37 69.814-20.81 86.705-26.175 103.79-30.762 74.546 17.09 111.054 22.43 147.583 27.53 74.677-26.923 255.056-47.828 242.336-107.17-5.07-23.66-49.42-23.68-60.8-26.446-43.71-10.62-45.668-13.813-89.89-40.05-12.76-7.572-26.825-13.77-37.32-24.26-23.77-23.753 27.303-56.29 15.93-82.063-48.27-18.264-75.43-25.28-103.078-26.863-238.808-3.932-188.848-32.874-187.133-34.146 25.984-19.28 51.22-39.562 77.19-58.864 9.166-6.814 18.36-13.667 28.198-19.468 32.696-14.094 42.206-16.716 51.874-17.38 83.15 3.685 99.122 16.005 116.906 22.978 18.26 7.158 36.607 14.307 55.55 19.384 131.615-11.135 154.39-30.327 181.772-38.017 156.148-20.927 195.8-29.343 235.763-35.9 58.6 65.25-89.165 8.933-196.214 82.412 10.203-2.526 21.016-12.205 32.976-20.193 14.42-9.632 29.162-18.784 44.06-27.657 19.355 27.086 5.134 18.424 44.507 38.658 45.013 14.337 57.405 14.02 69.225 16.725-16.518 14.462-37.012 23.356-57.57 31.89-31.884 13.236-64.667 24.213-96.713 37.056 65.59 26.036 13.968 43.697 33.1 49.798 81.206-18.105 83.215-28.426 89.71-28.73 44.628 22.067 28.273 30.38 13.258 40.748-16.444 11.353-57.68 18.85-47.78 36.206 211.92-14.706 266.232-13.785 320.46-15.304 44.348-16.094 79.62-34.117 116.725-47.5 55.047-53.54 63.492-93.4 55.174-131.445-9.858-45.088-55.304-41.417-75.784-73.737-1.907-3.01-8.3-30.32-3.565-36.68 6.638-8.916 16.462-15.073 25.72-21.223 10.665-7.085 22.838-11.636 33.77-18.3 18.48 16.127 53.922 18.8 89.39 20.444 88.62 18.556 74.432 25.835 61.816 34.647-19.67 13.74-40.3 26.084-59.84 40.01-12.678 9.035-25.187 18.4-36.75 28.825-5.622 5.07-16.154 10.036-14.552 17.434 197.987 30.374 149.25 81.416 111.837 110.863-29.42 23.157-60.27 44.463-89.612 67.72-9.6 7.61-15.987 19.68-27.113 24.802-27.27 12.55-56.93 19.16-85.852 27.196-33.03 9.177-66.223 18.024-99.903 24