如何制作船舶动画
如何制作船舶动画（如下图所示）？
我需要CSS或Javascript这两种技术中的哪一种？
2 个答案:
答案 0 :(得分：1)
这是浮动船的动画，希望你能从中学到一些东西。
HTML
<div class="wrap">
</div>
</div>
<div class="ocean"></div>
<div class="ocean-overlay"></div>
<div class="here-there">
<div class="traslate">
<div class="ship">
<div class="bottom-1">
<div class="bottom-1-top"></div>
<div class="bottom-1-top-left"></div>
<div class="bottom-1-top-right">
<div class="bottom-1-top-right-window"></div>
</div>
</div>
<div class="ship-body">
<div class="middle-window"></div>
<div class="blue-strip-top"></div>
<div class="blue-strip-bottom"></div>
<div class="ship-body-top-back">
<div class="blue-strip-top-half"></div>
</div>
<div class="chimney-base">
<div class="chimney"></div>
<div class="chimney"></div>
</div>
</div>
<div class="ship-body-top-front">
<div class="top-antenna"></div>
<div class="circular-base"></div>
<div class="circular-base-1"></div>
</div>
<div class="ship-body-top-front-mirror"></div>
</div>
</div>
</div>
</div>
CSS
html , body {height:100%;}
body {
background: #4297cd;
padding:0;
margin:0;
}
.ship {
width:350px;
height:20px;
margin-left:5%;
position: absolute;
}
.ship {
-webkit-animation:floating-ship 3s aletrnate ;
-webkit-transition-timing-function: cubic-bezier(0,.5,.99,.54);
-moz-animation:floating-ship 3s aletrnate ;
-moz-transition-timing-function: cubic-bezier(0,.5,.99,.54);
}
@-webkit-keyframes floating-ship {
from {-webkit-transform:rotate(4deg);}
to {-webkit-transform:rotate(-4deg);}
}
@-moz-keyframes floating-ship {
from {-moz-transform:rotate(4deg);}
to {-moz-transform:rotate(-4deg);}
}
.bottom-1 {
border-right:10px solid transparent;
border-top:12px solid #54575c;
border-left:16px solid transparent;
width:250px;
height:0px;
}
.bottom-1:after {
content:'';
display:block;
position:absolute;
top:-8px;
left:-7px;
border-right:10px solid transparent;
border-top:8px solid #fff;
border-left:7px solid transparent;
width:276px;
height:0px;
}
.bottom-1:before {
content:'';
display:block;
position:absolute;
top:-11px;
left:-8px;
border-right:1px solid transparent;
border-top:3px solid #e3001b;
border-left:1px solid transparent;
width:293px;
height:0px;
}
.bottom-1-top {
width:295px;
height:5px;
background:#e5e9ec;
position:absolute;
top:-16px;
left:-8px;
}
.bottom-1-top:after {
content:'';
display:block;
position:absolute;
height:5px;
width:20px;
background:red;
-webkit-transform:skewX(-40deg);
-moz-transform:skewX(-40deg);
background:#e5e9ec;
right:-2px;
}
.bottom-1-top-left {
width:60px;
height:15px;
background:#fff;
position:absolute;
top:-31px;
left:-8px;
}
.bottom-1-top-left:after {
content:'';
display:block;
position:absolute;
width:40px;
height:15px;
-webkit-transform:skewX(50deg);
-moz-transform:skewX(50deg);
background:#fff;
right:-9px;
}
.bottom-1-top-left:before {
content:'';
width:6px;
height:6px;
border-radius:50%;
background:#8a9295;
position:absolute;
z-index:1;
top:5px;
left:8px;
box-shadow:14px 0 0 #8a9295 , 28px 0 0 #8a9295 , 42px 0 0 #8a9295 ;
}
.bottom-1-top-right {
width:107px;
height:15px;
background:#fff;
position:absolute;
top:-31px;
left:180px;
}
.bottom-1-top-right:after {
content:'';
display:block;
position:absolute;
width:40px;
height:15px;
-webkit-transform:skewX(-50deg);
-moz-transform:skewX(-50deg);
background:#fff;
left:-9px;
}
.bottom-1-top-right:before {
content:'';
display:block;
position:absolute;
width:40px;
height:15px;
-webkit-transform:skewX(-50deg);
-moz-transform:skewX(-50deg);
background:#fff;
right:-13px;
}
.ship-body {
width:235px;
height:40px;
background:#ebebeb;
position:absolute;
top:-54px;
left:14px;
z-index:-1;
box-shadow: 0 -5px 7px rgba(0,0,0,0.1) inset;
}
.ship-body:before {
position:absolute;
left:-10px;
content:'';
width:40px;
-webkit-transform:skewX(-34deg);
-moz-transform:skewX(-34deg);
height:30px;
background:#ebebeb;
}
.ship-body:after {
position:absolute;
right:-16px;
content:'';
width:40px;
-webkit-transform:skewX(44deg);
-moz-transform:skewX(44deg);
height:30px;
background:#ebebeb;
}
.blue-strip-top {
background:#72a4c4;
width:224px;
height:4px;
position:absolute;
top:6px;
z-index:1;
left:8px;
}
.blue-strip-top:before {
content:'';
position:absolute;
width:10px;
background:#72a4c4;
height:4px;
left:-7px;
-webkit-transform:skewX(-30deg);
-moz-transform:skewX(-30deg);
}
.blue-strip-top:after {
content:'';
position:absolute;
width:10px;
background:#72a4c4;
height:4px;
right:-5px;
-webkit-transform:skewX(50deg);
-moz-transform:skewX(50deg);
}
.blue-strip-bottom {
background:#72a4c4;
width:240px;
height:4px;
position:absolute;
top:14px;
z-index:1;
}
.blue-strip-bottom:before {
content:'';
position:absolute;
width:10px;
background:#72a4c4;
height:4px;
left:-5px;
-webkit-transform:skewX(-30deg);
-moz-transform:skewX(-30deg);
}
.blue-strip-bottom:after {
content:'';
position:absolute;
width:10px;
background:#72a4c4;
height:4px;
right:-5px;
-webkit-transform:skewX(50deg);
-moz-transform:skewX(50deg);
}
.ship-body-top-back {
height:15px;
width:60px;
position:absolute;
background:#ebebeb;
top:-12px;
left:8px;
}
.ship-body-top-back:before {
width:15px;
height:15px;
content:'';
display:block;
position:absolute;
-webkit-transform:skewX(-34deg);
-moz-transform:skewX(-34deg);
background:#ebebeb;
left:-5px;
}
.ship-body-top-back:after {
width:15px;
height:15px;
content:'';
display:block;
position:absolute;
-webkit-transform:skewX(43deg);
-moz-transform:skewX(43deg);
background:#ebebeb;
right:-8px;
}
.ship-body-top-front {
position:absolute;
width:40px;
height:10px;
background:#efefef;
right:120px;
top:-74px;
}
.ship-body-top-front:before {
height:30px;
width:14px;
background:#efefef;
position:absolute;
content:'';
-webkit-transform:skewX(-40deg);
-moz-transform:skewX(-40deg);
left:-13px;
z-index:-2;
}
.ship-body-top-front:after {
height:10px;
width:20px;
background:#efefef;
position:absolute;
content:'';
-webkit-transform:skewX(44deg);
-moz-transform:skewX(44deg);
right:-11px;
z-index:-2;
}
.ship-body-top-front-mirror {
background:#a5d4e4;
width:40px;
height:18px;
position:absolute;
top:-70px;
right:125px;
z-index:-4;
border-radius:5px;
}
.ship-body-top-front-mirror:after {
content:'';
background:#a5d4e4;
width:40px;
height:18px;
position:absolute;
right:-16px;
-webkit-transform:skewX(44deg);
-moz-transform:skewX(44deg);
z-index:-4;
}
.blue-strip-top-half {
width:80%;
top:8px;
z-index:1;
height:4px;
background:#72a4c4;
position:absolute;
left:10%;
}
.blue-strip-top-half:before {
content:'';
width:10px;
top:0;
z-index:1;
height:4px;
background:#72a4c4;
position:absolute;
-webkit-transform:skewX(-30deg);
-moz-transform:skewX(-30deg);
left:-4px;
}
.blue-strip-top-half:after {
content:'';
width:10px;
top:0;
z-index:1;
height:4px;
background:#72a4c4;
position:absolute;
-webkit-transform:skewX(44deg);
-moz-transform:skewX(44deg);
right:-4px;
}
.top-antenna {
width:8px;
height:16px;
background:#fff;
position:absolute;
top:-16px;
left:20px;
-webkit-transform:SkewX(44deg);
-moz-transform:SkewX(44deg);
}
.top-antenna:before {
content:'';
position:absolute;
width:20px;
height:4px;
background:#fff;
display:block;
top:-4px;
-webkit-transform: skewX(-44deg) !important;
-moz-transform: skewX(-44deg) !important;
left: 2px;
}
.top-antenna:after {
content:'';
position:absolute;
width:0px;
height:0px;
border-bottom: 20px solid #fff;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
display:block;
top:-20px;
right:5px;
z-index:-1;
left: 15px;
}
.circular-base {
display: block;
position: absolute;
bottom: 10px;
left: 10px;
width: 7px;
height: 20px;
overflow: hidden;
}
.circular-base:before {
display:block;
content:'';
position:absolute;
bottom:0px;
left:-10px;
width:20px;
height:20px;
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 39%, rgba(255,255,255,0.5) 40%, rgba(255,255,255,1) 41%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0)), color-stop(39%,rgba(255,255,255,0)), color-stop(40%,rgba(255,255,255,0.5)), color-stop(41%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 39%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 39%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 39%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 39%,rgba(255,255,255,0.5) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
.circular-base-1 {
position:absolute;
width:26px;
height:4px;
background:#fff;
top:-4px;
left:3px;
}
.circular-base-1:before {
position: absolute;
content: '';
display: block;
width: 8px;
height: 8px;
background: #fff;
top: -8px;
left: 13px;
}
.chimney-base {
width:60px;
height:5px;
position:absolute;
top:-17px;
left:9px;
}
.chimney {
width:25px;
height:10px;
background:#f5f5f5;
position:absolute;
bottom:0;
margin-left:5px;
}
.chimney:before {
content:'';
width:25px;
height:6px;
background:grey;
position:absolute;
top:-6px;
}
.chimney:after {
content:'';
width:25px;
height:6px;
background:#f7f7f7;
position:absolute;
top:-12px;
}
.ocean {
width:100%;
position:absolute;
height:100px;
background:rgba(25,93,164,0.8);
bottom:0;
}
.ocean-overlay {
width:100%;
position:absolute;
height:100px;
background:rgba(25,93,164,0.35);
bottom:0;
z-index:10;
box-shadow:0 25px 25px rgba(25,93,164,0.5) inset;
}
.traslate {
-webkit-animation:5s ease-in-out 0s normal none infinite floating;
-moz-animation:5s ease-in-out 0s normal none infinite floating;
width:150px;
height:20px;
position:absolute;
}
@-webkit-keyframes floating {
0% {
bottom: 48px;
-webkit-transform:rotate(1deg);
-webkit-transform-origin:-20% -40%;
}
50% {
bottom: 52px;
-webkit-transform:rotate(-1deg);
-webkit-transform-origin:-20% -40%;
}
100% {
bottom: 48px;
-webkit-transform:rotate(1deg) ;
-webkit-transform-origin:-20% -40%;
}
}
@-moz-keyframes floating {
0% {
bottom: 48px;
-moz-transform:rotate(1deg);
-moz-transform-origin:-20% -40%;
}
50% {
bottom: 52px;
-moz-transform:rotate(-1deg);
-moz-transform-origin:-20% -40%;
}
100% {
bottom: 48px;
-moz-transform:rotate(1deg) ;
-moz-transform-origin:-20% -40%;
}
}
.here-there {
-webkit-animation:movenow 60s infinite ;
-moz-animation:movenow 60s infinite ;
position:absolute;
width:200px;
bottom:30px;
}
@-webkit-keyframes movenow {
0% {right:110%;}
100% {right:0;}
}
@-moz-keyframes movenow {
0% {right:110%;}
100% {right:0;}
}
.wrap {
overflow:hidden;
position:absolute;
width:100%;
height:100%;
}
.bottom-1-top-right-window {
width:6px;
height:6px;
border-radius:50%;
position:absolute;
background:#ADB1B3 ;
left:3px;
z-index:1;
top:5px;
box-shadow:14px 0 0 #ADB1B3 , 28px 0 0 #ADB1B3 , 42px 0 0 #ADB1B3 , 56px 0 0 #ADB1B3 , 70px 0 0 #ADB1B3 , 84px 0 0 #ADB1B3 , 98px 0 0 #ADB1B3;
}
.middle-window {
width:6px;
height:6px;
border-radius:50%;
position:absolute;
background:#ADB1B3 ;
left:56px;
z-index:1;
bottom:6px;
box-shadow:14px 0 0 #ADB1B3 , 28px 0 0 #ADB1B3 , 42px 0 0 #ADB1B3 , 56px 0 0 #ADB1B3 , 70px 0 0 #ADB1B3 , 84px 0 0 #ADB1B3 ;
}
答案 1 :(得分：0)
这是您需要导入gsap cdn的惊人示例 http://codepen.io/FabioG/pen/ZLONRY
$( document ).ready(function() {
//Boat animation
TweenMax.fromTo('#boatraw', 2.5, {rotationX:-10, transformOrigin:"bottom 0%"}, {rotation:10, ease: Power1.easeInOut, repeat: -1, yoyo: true});
TweenMax.fromTo('#boatshadow', 2.5, {rotationX:-10, transformOrigin:"bottom 0%"}, {rotation:10, ease: Power1.easeInOut, repeat: -1, yoyo: true});
TweenMax.to('#boatraw', 1, {y:-500, ease: Power1.easeInOut, repeat: -1, yoyo: true});
TweenMax.to('#boatshadow', 1, {y:-500, ease: Power1.easeInOut, repeat: -1, yoyo: true});
//Tentacle animation
TweenMax.fromTo('#octopusraw', 2.5, {rotation:-10, transformOrigin:"bottom 0%"}, {rotation:10, ease: Power1.easeInOut, repeat: -1, yoyo: true, delay: -0.7});
TweenMax.fromTo('#octopusshadow', 2.5, {rotation:-10, transformOrigin:"bottom 0%"}, {rotation:10, ease: Power1.easeInOut, repeat: -1, yoyo: true, delay: -0.7});
TweenMax.to('#octopusraw', 1, {y:-500, ease: Power1.easeInOut, repeat: -1, yoyo: true});
TweenMax.to('#octopusshadow', 1, {y:-500, ease: Power1.easeInOut, repeat: -1, yoyo: true});
//wave animation
TweenMax.fromTo('#wave1', 2, {x:'-2000'}, {x: '500', ease: Power1.easeInOut, repeat: -1, yoyo: true});
TweenMax.fromTo('#wave2', 3, {x:'-1800'}, {x: '500', ease: Power1.easeInOut, repeat: -1, yoyo: true, delay: -1.7});
TweenMax.fromTo('#wave3', 4, {x:'-1600'}, {x: '500', ease: Power1.easeInOut, repeat: -1, yoyo: true, delay: -1});
//Star animation
var stars = $('#stars').children();
stars.each(function(index, element){
TweenMax.to(element, (Math.random() * 1.5) + 1, {scale: 0, transformOrigin:"50% 50%", yoyo: true, repeat: -1, delay: -Math.random() * 2})
})
//Title animation
var tl = new TimelineMax(),
letterFallSpeed = .2;
tl.set('#vikingsWord', {y: -2500})
.to('#vikingsV', letterFallSpeed, {y: 2500})
.to('#vikingsI1', letterFallSpeed, {y: 2500})
.to('#vikingsK', letterFallSpeed, {y: 2500})
.to('#vikingsI2', letterFallSpeed, {y: 2500})
.to('#vikingsN', letterFallSpeed, {y: 2500})
.to('#vikingsG', letterFallSpeed, {y: 2500})
.to('#vikingsS', letterFallSpeed, {y: 2500})
.fromTo('#inTheSea', .8, {scale: 0, rotation: -15, transformOrigin:"50% 50%"}, {scale: 1, rotation: 0, ease: Elastic.easeOut.config(1, 0.3)});
});html{
background-color: #66C3D0;
}
svg{
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src=""></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20962 10601" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd">
<defs>
<style>
<![CDATA[
.str0 {stroke:black;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.200000}
.str1 {stroke:black;stroke-linecap:round;stroke-linejoin:round}
.fil11 {fill:none}
.fil10 {fill:#EBE663}
.fil9 {fill:#E0DC5D}
.fil1 {fill:#D6E9D8}
.fil7 {fill:#66C3D0}
.fil4 {fill:#57A7B3}
.fil0 {fill:#56698F}
.fil6 {fill:#3A3939}
.fil3 {fill:#43818A}
.fil8 {fill:#D4CE59}
.fil12 {fill:#FEFEFE;fill-rule:nonzero}
.fil2 {fill:#2B2A29;fill-opacity:0.200000}
.fil5 {fill:#3A3939;fill-opacity:0.200000}
]]>
</style>
<clipPath id="id0">
<path d="M0 0h20962v10601H0V0z"/>
</clipPath>
<clipPath id="id1">
<path d="M16856 867h2959v3948h-2959V867z"/>
</clipPath>
<clipPath id="id2">
<path d="M0 0h20962v10601H0V0z"/>
</clipPath>
<clipPath id="id3">
<path d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
</clipPath>
<clipPath id="id4">
<path d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
</clipPath>
<clipPath id="id5">
<path d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
</clipPath>
<clipPath id="id6">
<path d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
</clipPath>
<clipPath id="id7">
<path d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
</clipPath>
<clipPath id="id8">
<path d="M0 0h20962v10601H0V0z"/>
</clipPath>
</defs>
<g id="Layer_x0020_1">
<path class="fil0" d="M0 0h20962v10601H0z"/>
<g clip-path="url(#id0)">
<g id="_520340200">
<g id="stars">
<path id="1" class="fil1" d="M8570 2841c70,0 127,57 127,127 0,70 -57,127 -127,127 -71,0 -127,-57 -127,-127 0,-70 56,-127 127,-127z"/>
<path class="fil1" d="M11604 1812c59,0 107,48 107,108 0,59 -48,107 -107,107 -60,0 -108,-48 -108,-107 0,-60 48,-108 108,-108z"/>
<path class="fil1" d="M3497 3097c70,0 127,57 127,128 0,70 -57,127 -127,127 -70,0 -127,-57 -127,-127 0,-71 57,-128 127,-128z"/>
<path class="fil1" d="M16480 4357c45,0 82,36 82,82 0,45 -37,82 -82,82 -46,0 -83,-37 -83,-82 0,-46 37,-82 83,-82z"/>
<path class="fil1" d="M15297 1387c45,0 81,37 81,82 0,45 -36,81 -81,81 -45,0 -82,-36 -82,-81 0,-45 37,-82 82,-82z"/>
<path class="fil1" d="M11261 4321c55,0 100,44 100,100 0,55 -45,100 -100,100 -55,0 -100,-45 -100,-100 0,-56 45,-100 100,-100z"/>
<path class="fil1" d="M8259 2395c56,0 100,45 100,100 0,55 -44,100 -100,100 -55,0 -100,-45 -100,-100 0,-55 45,-100 100,-100z"/>
<path class="fil1" d="M17014 2998c56,0 101,45 101,100 0,56 -45,100 -101,100 -55,0 -100,-44 -100,-100 0,-55 45,-100 100,-100z"/>
<path class="fil1" d="M6183 4905c70,0 127,57 127,127 0,71 -57,128 -127,128 -71,0 -127,-57 -127,-128 0,-70 56,-127 127,-127z"/>
<path class="fil1" d="M127 1325c70,0 127,57 127,127 0,70 -57,127 -127,127 -70,0 -127,-57 -127,-127 0,-70 57,-127 127,-127z"/>
<path class="fil1" d="M4198 1266c71,0 128,57 128,127 0,71 -57,128 -128,128 -70,0 -127,-57 -127,-128 0,-70 57,-127 127,-127z"/>
<path class="fil1" d="M19404 5488c58,0 105,46 105,104 0,58 -47,105 -105,105 -57,0 -104,-47 -104,-105 0,-58 47,-104 104,-104z"/>
</g>
<g id="wave3">
<path id="wave3shadow" class="fil2" d="M26367 8825c504 1667 831 3819-28 5680-858 1862-2901 3434-6193 3904-3292 471-7833-161-12154-588s-8421-650-10977-1538c-2555-888-3565-2442-4070-4061s-505-3302 937-4835 4327-2915 6274-3122c1948-206 2958 764 3877 1522s1747 1305 2739 1383 2148-312 2975-731c828-418 1327-864 2137-1014 809-151 1929-6 2756 206 828 212 1364 491 1978 775 615 284 1309 574 1948 535s1223-407 1935-875 1552-1037 2239-1265c688-229 1224-117 1832 529 609 647 1290 1829 1795 3495z"/>
<path id="wave3raw" class="fil3" d="M27489 8635c504 1667 831 3818-27 5680s-2901 3434-6193 3904-7834-161-12155-589c-4321-427-8421-649-10976-1537-2555-889-3565-2443-4071-4061-505-1619-505-3302 938-4835 1442-1533 4327-2916 6274-3122s2958 764 3877 1522 1746 1304 2738 1382 2148-312 2976-730 1327-864 2136-1014c810-151 1929-6 2757 206s1363 490 1978 775c614 284 1308 574 1947 535s1223-407 1935-875c712-469 1552-1037 2240-1266 688-228 1223-117 1832 530 608 646 1290 1828 1794 3495z"/>
</g>
<g id="wave2">
<path id="wave2shadow" class="fil2" d="M24810 10589c-170 822-305 1990-646 3115-341 1124-888 2205-1856 2808-968 602-2355 724-4668 1064-2312 340-5550 898-8520 987-2969 89-5672-290-9037-859-3365-568-7394-1326-9402-2118-2009-791-1996-1616-1893-3305 104-1689 298-4242 1412-5731 1114-1488 3146-1912 4954-1627 1807 284 3389 1276 4521 1878s1814 814 2423 552 1146-998 2333-1388c1187-389 3025-432 4266 275s1885 2163 2861 2407c976 243 2285-726 3494-1308 1208-582 2315-775 3730-567 1415 207 3137 815 4290 1221 1153 407 1737 612 1926 953 189 342-17 820-188 1643z"/>
<path id="wave2raw" class="fil4" d="M25681 10400c-171 822-305 1990-646 3115-341 1124-889 2206-1856 2808-968 602-2355 724-4668 1064s-5550 898-8520 987-5672-290-9037-859c-3366-568-7394-1326-9403-2118-2008-791-1996-1616-1892-3305 103-1689 298-4242 1412-5731 1113-1488 3146-1912 4953-1627 1808 284 3390 1276 4522 1878s1814 814 2423 552 1145-998 2333-1388c1187-389 3025-432 4266 275 1240 707 1884 2164 2861 2407 976 244 2285-726 3493-1308 1209-581 2316-775 3731-567 1415 207 3137 815 4290 1221 1153 407 1737 612 1926 953 189 342-18 820-188 1643z"/>
</g>
<g id="octopus">
<path id="octopusshadow" class="fil5" d="M12389 7200c18-216-24-456-124-711-20-49-72-74-116-53-45 22-65 79-46 129 88 225 125 432 111 615-2 20 2 38 9 55 14 28 39 49 70 53 49 5 92-34 96-88zm944 830l-554 3085-755-136 543-3027c-58-145-110-288-157-427l-191 33c-61 10-153-16-241-205-52-111-94-260-119-421-50-333-21-683 157-714l123-21c-18-330 9-642 80-930l-130-71c-29-16-53-42-69-77-66-142 3-406 90-607 122-279 313-523 466-439l213 117c146-160 315-303 504-428l-17-47c-64-177 170-370 430-483 231-100 529-156 609 15l6 15 22 60c542-126 1127-128 1579-3 89 25 139 138 104 231-19 48-56 85-102 100-695 226-1634 743-2063 1469 9 12 17 26 25 43 54 115 60 332 16 568-45 242-138 475-259 539 13 43 30 90 54 140 109 235 325 510 534 776 15 20 31 40 47 60-184 257-439 523-764 707-61 35-121 60-181 78zm-931-2999c114-163 197-330 246-499 15-51-10-107-56-124-47-18-96 10-111 61-44 147-117 295-218 440-22 30-24 72-9 105 6 12 14 23 25 32 38 34 93 27 123-15zm1098 291c-64 168-104 335-119 496-2 20 1 39 9 56 13 28 39 49 69 53 48 7 92-32 97-86 13-142 49-290 106-440 19-50-2-107-46-129-45-22-97 0-116 50zm26-1575c1 9 4 18 8 27 18 37 56 60 95 52 190-38 354-101 488-190 41-27 56-86 29-134-25-47-79-62-121-35-116 77-260 132-429 166-48 9-79 60-70 114zm246-332c205-89 351-91 389-72l91 253c-4 10-13 25-29 43-31 35-86 81-164 127-39 23-84 47-135 69-205 89-351 91-390 72l-16-46-71-197-4-9c16-43 124-151 329-240zm-1597 1611c-14-45 0-208 94-426 96-220 201-331 240-346l219 120c1 3 2 7 3 12 0 2 0 3 1 5 0 7 1 14 1 23v9c0 8-1 18-2 28 0 5 0 9-1 14-1 10-3 21-4 32-1 7-2 13-3 20-2 11-5 22-7 34-2 9-4 17-6 27-3 10-6 22-9 34-3 11-6 22-10 34-3 10-7 22-11 33-4 14-9 27-14 42-3 8-7 17-10 26-7 17-14 35-22 53-95 220-201 332-240 346l-125-68-94-52zm-76 49l78-44-78 44zm1473 1013l-238-58c0-1-1-2-1-3-1-1-1-2-2-3-20-48-30-153-18-287 2-22 4-44 7-66 0-2 1-4 1-6 3-24 7-50 12-75 45-240 123-377 158-401l238 58c0 1 1 2 1 3 29 62 38 231-1 437-44 240-122 376-157 401zm-1438 1177c-44-93-79-222-101-362-43-284-5-459 20-493l99-17 171-29c10 8 34 34 64 97 43 94 79 222 100 363 43 283 6 458-20 492l-120 20 1 1-150 26c-11-8-35-35-64-98z"/>
<path id="octopusraw" class="fil6" d="M12929 6654c18-217-24-456-124-712-20-48-72-73-116-52-45 21-65 79-45 129 88 224 125 431 110 615-2 19 2 38 9 54 14 29 40 50 71 54 48 5 91-34 95-88zm944 830l-554 3085-755-136 544-3027c-59-145-111-288-158-427l-191 33c-61 10-153-17-241-205-52-111-94-261-118-421-51-333-22-683 156-714l123-21c-18-331 9-642 80-930l-130-71c-29-16-52-42-68-77-67-142 3-406 89-607 122-279 313-523 467-439l212 117c146-160 315-304 504-428l-17-47c-63-177 170-370 430-483 231-100 529-156 609 15l6 14 22 61c542-126 1127-129 1579-3 89 25 139 138 104 231-19 48-56 85-102 100-695 226-1634 743-2063 1469 9 12 18 26 26 43 53 115 59 332 15 568-45 242-138 475-258 538 12 44 30 91 53 140 110 236 325 511 534 777 15 19 31 40 47 60-184 257-438 522-764 707-61 34-121 60-181 78zm-931-3000c114-162 197-330 246-498 15-51-10-107-56-124-46-18-96 10-111 61-43 147-117 295-218 439-22 31-24 73-8 106 5 12 13 23 24 32 38 34 94 27 123-16zm1098 292c-64 168-104 335-119 496-2 20 2 39 9 56 14 28 39 49 69 53 49 7 92-32 97-86 13-142 49-290 107-440 19-50-2-108-47-130-45-21-97 1-116 51zm26-1576c2 10 5 19 8 28 18 37 56 60 95 52 190-38 354-102 488-190 42-27 56-86 30-134-25-47-80-62-121-35-116 76-261 132-430 166-48 9-79 60-70 113zm246-331c205-89 351-91 389-72l92 253c-5 10-14 25-30 42-31 35-85 81-164 128-39 23-84 47-135 69-205 89-351 91-389 72l-17-46-71-197-4-10c17-42 125-150 329-239zm-1597 1610c-14-44 0-208 95-425 95-220 200-332 240-346l218 120c1 3 2 7 3 12 0 1 1 3 1 5 1 6 1 14 1 23v9c0 8-1 18-2 28 0 5 0 9-1 14-1 10-2 21-4 32-1 6-2 13-3 20-2 10-5 22-7 33l-6 27c-2 11-6 23-9 34-3 12-6 23-9 35-4 10-8 22-12 33-4 14-8 27-14 42-3 8-7 17-10 26-7 17-14 35-22 53-95 220-200 331-240 346l-124-69-1 1-94-53zm-76 50l78-44-78 44zm1473 1013l-238-58c0-1-1-2-1-3-1-1-1-3-1-4-21-47-31-152-19-286 2-22 4-44 7-66 1-2 1-4 1-6 3-24 7-50 12-75 45-240 123-377 158-402l238 59c0 1 1 2 1 3 29 61 38 231 0 437-45 240-123 376-158 401zm-1438 1177c-44-93-79-222-101-363-43-283-5-458 20-492l99-17 171-29c10 7 34 34 64 97 43 94 79 222 100 363 44 283 6 458-19 492l-120 20v1l-150 25c-10-7-34-34-64-97z"/>
</g>
<g id="boat">
<path id="boatshadow" class="fil5 str0" d="M2871 5099c-110-79-260 36-213 162 44 120 220 120 263-1 26 143 45 286 78 428 36 155 87 308 160 450 136 264 347 478 616 607 39 18 79 35 119 50l-367 475c-72-30-158-10-208 55l-176 229c-60 77-46 188 32 248 77 60 188 46 248-32l177-228c50-65 48-153 1-215l386-501c164 49 334 71 505 79 19 1 38 1 56 2l-280 363c-72-30-158-10-208 55l-176 229c-60 77-46 188 32 248 77 60 188 46 248-32l177-228c50-65 48-153 1-215l320-415c128 6 257 12 386 16v292l-39 50c-72-30-158-10-208 55l-176 229c-60 77-46 188 32 248 77 60 188 46 248-32l143-184v5725h767V7552l8-10c50-65 48-153 1-215l294-382c102-1 203-3 304-7 121-4 242-19 361-45l-292 377c-72-30-158-10-208 55l-176 229c-60 77-46 188 32 248 77 60 188 46 248-32l177-228c50-65 48-153 1-215l366-474c128-42 251-99 363-176 226-155 390-377 494-629 52-129 88-263 114-399 22-122 34-245 49-368 53 95 194 94 246-2 50-91-19-207-123-207-72 0-119 56-152 114-34 59-58 124-83 187-57 145-115 290-187 428-5 10-11 19-16 29-69-167-234-285-426-285-212 0-391 144-445 340-53-196-232-340-444-340s-392 144-445 340c-45-166-181-296-351-331v-230h1219l-100-156c-292-458-331-963-108-1385l2-4h219v-253H5525v-260h-186v260H4106v253h219l2 4c224 422 184 926-108 1385l-100 156h1220v230c-170 35-307 164-352 331-53-196-232-340-445-340-212 0-391 144-444 340-53-196-232-340-445-340-207 0-383 138-441 327-72-136-129-282-180-427-24-68-47-136-74-203-20-51-41-110-87-143zm2944 1846c62 1 124 1 186 1l-186 240v-241zm1395-1089c83 0 150 67 150 150 0 82-67 149-150 149-82 0-149-67-149-149 0-83 67-150 149-150zm-889 0c82 0 149 67 149 150 1 82-67 149-149 149-83 0-150-67-150-149 0-83 67-150 150-150zm-33-2019c-37 94-64 191-80 290H4655c-16-99-42-196-79-290h1712zm-1615 458h1517c-5 121 5 243 29 366H4644c25-123 34-245 29-366zm-136 826h-56c49-95 89-191 119-288h1663c31 97 70 193 120 288H4537zm895 735c82 0 149 67 149 150 0 82-67 149-149 149-83 0-150-67-150-149 0-83 67-150 150-150zm-889 0c82 0 149 67 149 150 0 82-67 149-150 149-82 0-149-67-149-149 0-83 67-150 150-150zm-890 0c83 0 150 67 150 150 0 82-67 149-150 149-82 0-149-67-149-149 0-83 67-150 149-150z"/>
<path id="boatraw" class="fil6 str1" d="M3255 4921c-110-79-260 36-214 162 44 120 221 120 264-1 26 143 44 287 77 428 37 155 87 308 160 450 136 264 348 478 617 607 39 19 79 35 119 50l-367 475c-72-30-158-9-208 55l-177 229c-59 77-45 189 32 248 78 60 189 46 249-32l176-228c50-65 49-153 1-215l387-501c163 49 334 71 505 79 19 1 37 2 56 2l-280 363c-72-30-158-9-208 55l-177 229c-59 77-45 189 32 248 78 60 189 46 249-31l176-229c50-65 49-153 1-215l320-414c129 5 258 11 386 16v291l-38 50c-72-30-158-9-208 55l-177 229c-59 77-45 189 32 248 78 60 189 46 249-31l142-185v5725h768V7374l7-10c50-65 48-153 1-215l295-382c101-1 202-3 303-6 121-5 243-19 361-46l-291 377c-72-30-158-9-208 55l-177 229c-59 77-45 189 32 248 78 60 189 46 249-31l176-229c50-65 49-153 1-215l367-474c128-42 250-99 363-176 226-155 390-377 494-629 51-129 88-263 113-399 23-122 35-245 50-368 53 95 194 94 246-1 50-92-19-207-123-207-73 0-119 55-152 113-34 59-58 124-83 187-58 145-115 290-188 428-5 10-10 20-15 29-70-167-234-285-426-285-213 0-392 145-445 340-53-195-232-340-444-340-213 0-392 145-445 340-45-166-181-295-352-330v-230h1220l-100-157c-292-458-332-963-108-1385l2-3h219v-254H5908v-260h-185v260H4490v254h219l2 3c223 422 184 927-108 1385l-100 157h1220v229c-171 35-307 165-352 331-53-195-233-340-445-340s-391 145-444 340c-54-195-233-340-445-340-208 0-384 138-441 328-72-137-129-283-181-428-24-68-46-136-73-203-20-51-42-110-87-143zm2944 1846c62 1 124 1 185 1l-185 240v-241zm1395-1089c82 0 149 67 149 150 0 82-67 149-149 149-83 0-150-67-150-149 0-83 67-150 150-150zm-889 0c82 0 149 67 149 150 0 82-67 149-149 149-83 0-150-67-150-149 0-83 67-150 150-150zm-34-2019c-37 95-63 192-79 290H5039c-16-98-42-195-79-290h1711zm-1614 458h1517c-5 121 4 244 29 366H5028c24-122 34-245 29-366zm-136 826h-57c50-95 89-191 120-288h1663c30 97 70 193 119 288H4921zm894 735c83 0 150 67 150 150 0 82-67 149-150 149-82 0-149-67-149-149 0-83 67-150 149-150zm-889 0c83 0 150 67 150 150 0 82-67 149-150 149-82 0-149-67-149-149 0-83 67-150 149-150zm-889 0c82 0 150 67 150 150 0 82-68 149-150 149s-150-67-150-149c0-83 67-150 150-150z"/>
</g>
<g id="wave1">
<path id="wave1shadow" class="fil2" d="M29951 11948c-291 730-653 1800-1548 2971-894 1170-2321 2441-4988 3027-2667 585-6574 485-10469 540-3895 56-7777 268-10905-256s-5502-1784-6906-3382c-1405-1597-1840-3533-1958-4910-117-1377 83-2195 1029-2853 946-659 2638-1159 4034-1003 1395 156 2494 968 3440 1630 945 663 1736 1175 2905 1086 1168-89 2714-780 3809-1332 1096-552 1741-964 2666-820 925 145 2130 848 3110 1361 979 512 1734 836 2457 671 724-165 1416-818 2179-1050 764-231 1597-40 3059 270 1461 310 3550 739 5069 1176 1519 438 2468 884 2997 1112 530 229 639 240 585 441-55 200-274 590-565 1321z"/>
<path id="wave1raw" class="fil7" d="M30706 11822c-291 731-653 1801-1548 2972-895 1170-2321 2441-4988 3026-2667 586-6574 485-10469 541s-7778 268-10906-256-5501-1784-6906-3382c-1404-1598-1840-3533-1957-4910-118-1377 82-2195 1029-2854 946-659 2637-1158 4033-1002s2495 968 3440 1630 1737 1175 2905 1086c1169-89 2714-780 3810-1332 1095-552 1740-965 2665-820s2130 848 3110 1360c980 513 1734 837 2458 672s1416-819 2179-1050 1597-40 3058 269c1461 310 3550 739 5069 1177 1519 437 2469 883 2998 1112 529 228 639 240 584 440-55 201-274 591-564 1321z"/>
</g>
<path id="moon" class="fil8" d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
</g>
<g clip-path="url(#id3)">
<path id="Curve_x0020_" class="fil9" d="M17986 475c737 530 1095 1487 823 2406s-1093 1527-1999 1571c195 140 416 251 660 323 1163 344 2384-320 2728-1483s-320-2384-1482-2728c-244-72-490-100-730-89z"/>
<path id="Curve_x0020__0" class="fil10" d="M18819 780c575 731 657 1774 128 2602-528 829-1508 1194-2413 981 152 193 339 365 558 505 1048 668 2439 360 3107-687 668-1048 361-2439-687-3107-219-140-453-237-693-294z"/>
</g>
<g clip-path="url(#id8)">
<path class="fil11" d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
<g id="vikingsWord">
<path id="vikingsS" class="fil12" d="M5093 453c188 81 296 130 323 146l1 5c0 2-56 59-169 172l-106-58c-71 76-109 119-113 129 331 137 514 215 547 233l47 260c-73 83-179 189-319 317l-5 1c-26-16-155-76-387-179l-6-8-32-176c-1-2 39-43 118-122l9-2c145 64 218 98 219 101-41 40-61 62-60 66l100 54c84-89 126-135 126-137-9-8-156-73-442-196-79-37-119-57-120-61l-42-228c27-35 130-141 311-317z"/>
<path id="vikingsG" class="fil12" d="M4294 588l28-1 267-49c6 1 10 3 11 8l36 198c1 6-2 10-8 11l-394 72 116 639c1 4 36 24 106 61 19-17 47-49 82-95-69-29-104-43-107-42l-1-5c3-10 60-69 171-178 17-3 84 26 202 86l32 179c-209 219-319 329-329 331-241-105-381-170-420-194l-171-938c0-6 2-10 7-11l350-64c10-1 17-4 22-8z"/>
<path id="vikingsN" class="fil12" d="M1718 2312c-290 53 894-163 0 0zM3076 820l276-50 221 111 4-1-25-137c0-7 3-10 8-11l270-50c7 0 11 2 12 8l217 1185c1 6-2 10-9 11l-270 50c-6 1-10-2-11-8l-139-759c-3-4-76-39-219-102l-5 1 164 896c1 6-1 10-8 11l-266 49c-6 1-10-2-11-8L3069 831c0-7 2-10 7-11z"/>
<path id="vikingsI2" class="fil12" d="M2712 886l271-49c6 0 9 2 10 8l217 1185c1 6-2 10-8 11l-270 50c-6 1-10-2-11-8L2704 897c0-6 3-10 8-11z"/>
<path id="vikingsK" class="fil12" d="M1862 1042l272-50c6 0 10 2 11 7l109 600 173-164-86-471c-1-7 1-10 7-11l271-50c7 0 10 3 11 8l103 562c0 4-87 90-263 259 197 71 308 116 335 136l52 285-9 1-534-226 48 261c1 7-1 11-7 12l-272 50c-6 1-10-2-11-9l-217-1190c0-6 2-10 7-10z"/>
<path id="vikingsI1" class="fil12" d="M1498 1108l270-49c7 0 10 2 11 7l217 1186c1 6-2 10-8 11l-270 49c-7 1-10-1-11-7l-217-1186c0-7 3-10 8-11z"/>
<path id="vikingsV" class="fil12" d="M684 1257l260-48c6 0 10 2 11 8l154 843c2 2 37 23 106 61 5-1 32-33 81-95l-154-844c0-6 2-9 8-10l260-48c6 0 10 3 11 8l170 935c-17 24-124 133-322 327l-4 1c-255-112-394-176-417-192l-171-936c0-6 2-10 7-10z"/>
</g>
<path id="inTheSea" class="fil12" d="M4799 1878h67c1 1 2 1 2 3v291c0 2-1 2-2 2h-67c-1 0-2 0-2-2v-291c0-2 1-3 2-3zm90 0h68l48 36h1v-33c0-2 1-3 2-3h66c2 1 3 1 3 3v291c0 2-1 2-3 2h-66c-2 0-2 0-2-2v-187c-1-1-17-12-48-33h-1v220c0 2-1 2-3 2h-65c-2 0-2 0-2-2v-291c0-2 1-3 2-3zm313 0h183c1 0 2 1 2 2v51c0 2-1 3-2 3h-58v238c0 2 0 2-2 2h-65c-2 0-3 0-3-2v-238h-55c-1 0-2-1-2-3v-51c0-2 1-2 2-2zm202 0h66c2 0 3 1 3 3v179h48v-179c1-2 2-3 3-3h65c2 0 3 1 3 3v291c0 2-1 2-3 2h-65c-2 0-3 0-3-2v-51h-48v51c0 2-1 2-3 2h-66c-2 0-3 0-3-2v-127c0-5 1-11 2-19-1 0-2-4-2-13v-9c0-1 1-1 2-1l-2-2v-120c1-2 1-3 3-3zm272-1c1 0 3 1 4 1h20c1 0 3-1 4-1s3 1 5 1h14c3 0 4-1 4-1l5 1h27c2 0 3 1 3 2v48c0 2-1 3-3 3h-83v54h45c2 0 2 1 2 2v48c0 1 0 2-2 2h-45v51s8 7 22 19h2c14-12 22-18 23-18 28 18 45 30 50 35v1l-73 49h-3c-57-40-87-61-90-64v-131c0-4 0-9 1-16-1 0-1-3-1-11 0-7 0-11 1-13-1-7-1-13-1-17v-42c0-2 1-2 2-2h62c2 0 4-1 5-1zm307 2c41 27 64 43 70 48v1c0 1-16 12-48 34l-22-18c-21 15-31 23-33 26 73 47 113 73 120 79v64c-21 16-51 37-90 61h-1c-5-4-33-24-84-59l-1-2v-44l33-24h3c31 22 47 33 47 34-11 8-17 12-17 13l22 17c23-17 35-26 35-27-1-2-33-24-96-66-18-12-26-19-26-19v-57c8-7 37-27 88-61zm170-2c2 0 3 1 5 1h19c2 0 3-1 4-1 2 0 3 1 5 1h15c2 0 3-1 3-1l6 1h27c1 0 2 1 2 2v48c0 2-1 3-2 3h-84v54h45c2 0 3 1 3 2v48c0 1-1 2-3 2h-45v51s8 7 23 19h1c14-12 22-18 24-18 28 18 44 30 49 35v1l-73 49h-2c-58-40-88-61-90-64v-131c0-4 0-9 1-16-1 0-1-3-1-11 0-7 0-11 1-13-1-7-1-13-1-17v-42c0-2 1-2 2-2h62c1 0 3-1 4-1zm204 2h1c55 37 85 58 92 64v229c0 2-1 2-3 2h-64c-1 0-2 0-2-2v-49h-46v49c0 2-1 2-2 2h-65c-1 0-2 0-2-2v-229c5-4 35-26 91-64zm-22 87v99h46v-100s-8-7-23-19c-11 9-19 15-23 20z"/>
</g>
</g>
<path class="fil11" d="M0 0h20962v10601H0z"/>
</g>
</svg>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？