svg+jquery实现一个差异滚动海上小岛效果代码
代码语言：html
所属分类：视觉差异
代码描述：svg+jquery实现一个差异滚动海上小岛效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
<style>
/* END COLOURS */
/*
===========================
General styling
===========================
*/
body {
background-color: #17517b; }
#parallax {
height: 150vh;
width: 100%;
overflow: hidden;
position: relative;
display: none; }
#parallax .layer {
position: fixed;
z-index: -1;
height: 100vh;
width: 100%;
background-position: bottom center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed; }
#parallax .layer svg {
position: absolute;
bottom: 0; }
section#topper {
position: relative; }
section#topper .background {
background: #75c9f0;
/* Old browsers */
background: -moz-linear-gradient(top, #75c9f0 1%, #75c9f0 1%, #d8e9eb 51%, #bfbada 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #75c9f0 1%, #75c9f0 1%, #d8e9eb 51%, #bfbada 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #75c9f0 1%, #75c9f0 1%, #d8e9eb 51%, #bfbada 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75c9f0', endColorstr='#bfbada',GradientType=0 );
/* IE6-9 */ }
section#topper .landscape-container {
width: 100%;
position: relative;
padding-top: 20px;
height: 100vh; }
section#topper .landscape-container .sky svg {
top: 0; }
section#topper .landscape-container .mountains-pink svg {
bottom: 3%; }
section#topper .landscape-container .mountains-purple svg {
bottom: 6%; }
section#topper .landscape-container .background-mountains svg {
bottom: 7%; }
section#topper .boat {
position: relative;
text-align: left; }
section#topper .boat svg {
height: 12%;
width: 12%;
position: relative;
left: 50px;
top: -300px; }
section#blue {
height: 800px;
width: 100%;
background-color: #17517b;
position: relative;
overflow: hidden; }
.svg-content {
display: inline-block;
overflow: hidden;
top: 0;
left: 0; }
svg {
padding: 0;
margin: 0;
display: block; }
.bubbles {
width: 10%;
height: 10%; }
/* ==========================================================================
Animations
========================================================================== */
@-webkit-keyframes swim {
0% {
margin-left: -35px; }
90% {
margin-left: 100%; }
100% {
margin-left: 100%; } }
@keyframes swim {
0% {
margin-left: -35px; }
100% {
margin-left: 100%; } }
svg.fish1 {
position: relative;
top: 50%;
right: 8%;
width: 10%;
height: 10%;
animation: swim 40s;
-webkit-animation: swim 40s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-direction: reverse;
-webkit-animation-direction: reverse; }
svg.fish2 {
position: absolute;
bottom: 8%;
left: 8%;
width: 10%;
height: 10%;
animation: swim 40s;
-webkit-animation: swim 40s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear; }
svg .fish1,
svg .fish2 {
-moz-animation: fish-bounce 2s infinite;
-webkit-animation: fish-bounce 2s infinite;
animation: fish-bounce 2s infinite; }
@-moz-keyframes fish-bounce {
0%, 50%, 100% {
-moz-transform: translateY(0);
transform: translateY(0); }
25% {
-moz-transform: translateY(-2px);
transform: translateY(-2px); }
75% {
-moz-transform: translateY(-1px);
transform: translateY(-1px); } }
@-webkit-keyframes fish-bounce {
0%, 50%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0); }
25% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px); }
75% {
-webkit-transform: translateY(-1px);
transform: translateY(-1px); } }
@keyframes fish-bounce {
0%, 50%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0); }
25% {
-moz-transform: translateY(-2px);
-ms-transform: translateY(-2px);
-webkit-transform: translateY(-2px);
transform: translateY(-2px); }
75% {
-moz-transform: translateY(-1px);
-ms-transform: translateY(-1px);
-webkit-transform: translateY(-1px);
transform: translateY(-1px); } }
.waves {
position: relative;
bottom: -200px;
height: 500px; }
.waves:after {
height: 50%;
background-color: #17517b;
content: '';
z-index: 2;
width: 100%;
display: block;
position: absolute;
bottom: -50%; }
.waves svg {
width: 108%; }
.waves svg > * {
position: relative; }
.waves svg > svg:nth-child(2) {
animation: move 5s infinite ease-in-out;
animation-delay: -2.5s;
right: 0; }
.waves svg > svg:nth-child(3) {
animation: move 5s infinite ease-in-out;
animation-delay: -3s;
right: 0; }
.waves svg > *:nth-child(4) {
animation: move 7s infinite ease-in-out;
animation-delay: -5s;
right: 0; }
.waves svg > *:nth-child(5) {
animation: move 9s infinite ease-in-out;
animation-delay: -2s; }
.waves svg > *:nth-child(6) {
animation: boat 11s infinite ease-in-out;
animation-delay: -9s; }
.waves svg > *:nth-child(7) {
animation: boat 7s infinite ease-in-out;
animation-delay: -5s; }
.waves svg > *:nth-child(8) {
animation: boat 5s infinite ease-in-out;
animation-delay: -3s; }
.waves svg > *:nth-child(9) {
animation: boat 11s infinite ease-in-out;
animation-delay: -9s; }
.floating {
z-index: auto;
-webkit-animation-name: floating;
animation-name: floating;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out; }
@-o-keyframes floating {
from {
transform: translate(0, 0); }
50% {
transform: translate(0, 10px); }
to {
transform: translate(0, 0); } }
@-ms-keyframes floating {
from {
transform: translate(0, 0); }
50% {
transform: translate(0, 10px); }
to {
transform: translate(0, 0); } }
@-webkit-keyframes floating {
from {
transform: translate(0, 0); }
50% {
transform: translate(0, 10px); }
to {
transform: translate(0, 0); } }
@-moz-keyframes floating {
from {
transform: translate(0, 0); }
50% {
transform: translate(0, 10px); }
to {
transform: translate(0, 0); } }
@keyframes floating {
from {
transform: translate(0, 0); }
50% {
transform: translate(0, 10px); }
to {
transform: translate(0, 0); } }
.boat {
z-index: auto;
-ms-animation-name: rocking;
-o-animation-name: rocking;
-moz-animation-name: rocking;
-webkit-animation-name: rocking;
animation-name: rocking;
-o-animation-duration: 3s;
-ms-animation-duration: 3s;
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-o-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out; }
@-o-keyframes rocking {
0% {
transform: rotate(-1deg); }
50% {
transform: rotate(1deg); }
100% {
transform: rotate(-1deg); } }
@-ms-keyframes rocking {
0% {
transform: rotate(-1deg); }
50% {
transform: rotate(1deg); }
100% {
transform: rotate(-1deg); } }
@-moz-keyframes rocking {
0% {
transform: rotate(-1deg); }
50% {
transform: rotate(1deg); }
100% {
transform: rotate(-1deg); } }
@-webkit-keyframes rocking {
0% {
transform: rotate(-1deg); }
50% {
transform: rotate(1deg); }
100% {
transform: rotate(-1deg); } }
@keyframes rocking {
0% {
transform: rotate(-1deg); }
50% {
transform: rotate(1deg); }
100% {
transform: rotate(-1deg); } }
.cloud.one {
opacity: 0.9;
-webkit-animation: drift 95s linear infinite;
-moz-animation: drift 95s linear infinite;
-o-animation: drift 95s linear infinite;
-ms-animation: drift 95s linear infinite;
animation: drift 95s linear infinite; }
.cloud.two {
-webkit-animation: drift 70s linear infinite;
-moz-animation: drift 70s linear infinite;
-o-animation: drift 70s linear infinite;
-ms-animation: drift 70s linear infinite;
animation: drift 70s linear infinite; }
/* Animation for the drifting clouds */
@-webkit-keyframes drift {
0% {
opacity: 1;
-webkit-transform: translateX(0px); }
50% {
opacity: 0.7;
-webkit-transform: translateX(200%); }
100% {
opacity: 1;
-webkit-transform: translateX(0px); } }
@-moz-keyframes drift {
0% {
opacity: 1;
-moz-transform: translateX(0px); }
50% {
opacity: 0.7;
-moz-transform: translateX(200%); }
100% {
opacity: 1;
-moz-transform: translateX(0px); } }
@-o-keyframes drift {
0% {
opacity: 1;
-o-transform: translateX(0px); }
50% {
opacity: 0.7;
-o-transform: translateX(200%); }
100% {
opacity: 1;
-o-transform: translateX(0px); } }
@-ms-keyframes drift {
0% {
opacity: 1;
-ms-transform: translateX(0px); }
50% {
opacity: 0.7;
-ms-transform: translateX(200%); }
100% {
opacity: 1;
-ms-transform: translateX(0px); } }
@keyframes drift {
0% {
opacity: 1;
transform: translateX(0px); }
50% {
opacity: 0.7;
transform: translateX(200%); }
100% {
opacity: 1;
-webkit-transform: translateX(0px); } }
@-o-keyframes move {
0% {
transform: translateX(0); }
50% {
transform: translateX(-50px); }
100% {
transform: translateX(0); } }
@-ms-keyframes move {
0% {
transform: translateX(0); }
50% {
transform: translateX(-50px); }
100% {
transform: translateX(0); } }
@-webkit-keyframes move {
0% {
transform: translateX(0); }
50% {
transform: translateX(-50px); }
100% {
transform: translateX(0); } }
@-moz-keyframes move {
0% {
transform: translateX(0); }
50% {
transform: translateX(-50px); }
100% {
transform: translateX(0); } }
@keyframes move {
0% {
transform: translateX(0); }
50% {
transform: translateX(-50px); }
100% {
transform: translateX(0); } }
@-o-keyframes boat {
0% {
transform: translateX(0); }
50% {
transform: translateX(-50px); }
100% {
transform: translateX(0); } }
@-ms-keyframes boat {
0% {
transform: translateX(0); }
50% {
transform: translateX(-50px); }
100% {
transform: translateX(0); } }
@-moz-keyframes boat {
0% {
transform: translateX(0); }
50% {
transform: translateX(-50px); }
100% {
transform: translateX(0); } }
@-webkit-keyframes boat {
0% {
transform: translateX(0); }
50% {
transform: translateX(-50px); }
100% {
transform: translateX(0); } }
@keyframes boat {
0% {
transform: translateX(0); }
50% {
transform: translateX(-50px); }
100% {
transform: translateX(0); } }
@keyframes bounce {
0%, 40%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0); }
10% {
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
-webkit-transform: translateY(-6px);
transform: translateY(-6px); }
20% {
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px); }
25% {
-moz-transform: translateY(-3px);
-ms-transform: translateY(-3px);
-o-transform: translateY(-3px);
-webkit-transform: translateY(-3px);
transform: translateY(-3px); }
30% {
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px); } }
.bounce {
-moz-animation: bounce 2s infinite;
-ms-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
-o-animation: bounce 2s infinite;
animation: bounce 2s infinite; }
/* Larger than mobile */
/* Larger than phablet (also point when grid becomes active) */
/* Larger than tablet */
/* Larger than desktop */
@media (min-width: 1000px) {
#mobile-svg {display: none; }
#parallax {display: block; }
svg.fish1 { top:5%;}
svg.fish1 { bottom:80%;}
}
@media (max-width: 999px) {
svg.fish1 { top:5%;}
svg.fish2 { bottom:80%;}
#blue {display:none;}
}
/* Larger than Desktop HD */
@media (min-width: 1200px) {
.waves {
bottom: -260px; }
.mountains-pink svg, .mountains-purple svg {
bottom: 5%; }
}
</style>
</head>
<body>
<section id="topper">
<div id="parallax">
<div class="layer background" data-type="parallax" data-depth="0.1"></div>
<div class="layer sun" data-type="parallax" data-depth="0.12">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-40 0 551.36 248.7">
<g transform="scale(0.5)">
<circle cx="69.12" cy="41.54" r="25.76" transform="translate(-50.63 51.8) rotate(-49.69)" fill="#fbc73a"/>
</g>
</svg>
</div>
<div class="landscape-container">
<div class="layer background-mountains" data-type="parallax" data-depth="0.15">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 595.22 277.03">
<defs>
<linearGradient id="linear-gradient" x1="297.61" y1="277.03" x2="297.61" gradientUnits="userSpaceOnUse">
<stop offset="0.62" stop-color="#c9bdde"/>
<stop offset="0.99" stop-color="#a18aab"/>
</linearGradient>
</defs>
<polygon id="Background_Mountains" data-name="Background Mountains" points="35.64 88.56 54.91 96.51 106.55 7.51 179.47 60.09 191.22 39.82 220.57 63.17 290.14 0 360.75 80.34 421.01 25.22 524.08 93.44 594.9 52.91 595.22 275.52 0 277.03 0 118.4 35.64 88.56" fill="url(#linear-gradient)"/>
</svg>
</div>
<div class="layer sky" data-type="parallax" data-depth="0.15">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 0 541.36 158.7">
<g transform="scale(0.7)">
<g class="cloud one">
<path id="Cloud_2" data-name="Cloud 2" d="M134.95,60.76A11.58,11.58,0,0,1,123.4,72.31H110.08l-0.39.41a11.62,11.62,0,0,1-16.87-.41H84.27a11.55,11.55,0,0,1-1.3-23A9.34,9.34,0,0,1,98.7,44.77a8.31,8.31,0,0,1,.58.64A15.19,15.19,0,0,1,114,33.92h0.28A15.19,15.19,0,0,1,129.4,49.06v0.28q0,0.76-.07,1.51A11.56,11.56,0,0,1,134.95,60.76Z" transform="translate(-43.36 -15.58)" fill="#fff"/>
</g>
<g class="cloud two">
<rect x="334.64" y="20.11" width="65.14" height="27.3" rx="13.65" ry="13.65" fill="#fff"/>
<circle cx="355.18" cy="21.18" r="12.04" fill="#fff"/>
<ellipse cx="376.08" cy="20.74" rx="15.8" ry="13.01" fill="#fff"/>
</g>
<g class="cloud one" transform="translate(200 290.5)" >
<rect x="475.78" y="130.14" width="65.57" height="28.56" rx="14.28" ry="14.28" fill="#fff"/>
<circle cx="495.54" cy="134.41" r="10.66" fill="#fff"/>
<ellipse cx="514.36" cy="139.84" rx="18.83" ry="16.08" fill="#fff"/>
</g>
<g class="cloud two">
<rect x="234.01" y="67.44" width="53.6" height="23.35" rx="11.67" ry="11.67" fill="#fff"/>
<ellipse cx="253.76" cy="68.42" rx="12.3" ry="9.2" fill="#fff"/>
<ellipse cx="274.26" cy="79.27" rx="15.39" ry="13.15" fill="#fff"/>
</g>
</g>
</svg>
</div>
<div class="layer mountains-pink" data-type="parallax" data-depth="0.35">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595.28 273.25">
<g id="Mountain_4" data-name="Mountain 4">
<path d="M440.51,178.84l-39.38-55.29L251.29,395.36a0.8,0.8,0,0,0,.71,1.18H595.28C595.93,396.54,440.51,178.84,440.51,178.84Z" transform="translate(0 -123.55)" fill="#b66586"/>
<path d="M408.53,184.07c7-1.25,15.27,12.69,21.72,10.9,5.22-1.45,1.84-8.07,4.27-12.4,0.86-1.54,5.65-4.2,5.65-4.2l-39-54.81-41.29,75s19.33-15.13,25.53-12C392.4,190.14,400.5,185.49,408.53,184.07Z" transform="translate(0 -123.55)" fill="#fff"/>
<polygon points="401.13 0 404.85 40.59 420.82 70.13 409.37 92.08 435.82 123.08 436.42 174.32 474.49 195.83 467.04 243.3 502.09 273.25 595.28 272.99 401.13 0" opacity="0.3"/>
<path d="M465.1,173.48" transform="translate(0 -123.55)"/>
<polygon points="331 158.41 370.71 137.29 402.58 209.49 412.46 253.34 410.42 272.73 251.5 272.83 324.8 138.08 331 158.41" fill="#060809" opacity="0.3"/>
</g>
<g id="Mountain_4-2" data-name="Mountain 4">
<path d="M485.18,394.36L344.69,197.11l-35.89-50.39L172.25,394.43a0.73,0.73,0,0,0,.64,1.07H484.58A0.73,0.73,0,0,0,485.18,394.36Z" transform="translate(0 -123.55)" fill="#b66586"/>
<path d="M314.76,199.43c6.4-1.14,8.76,7.91,18.19,8.21,6.06,0.19,4-3.21,6.23-7.16,0.78-1.4,5.17-3.84,5.17-3.84l-35.55-49.91c0-1.27-37.68,68.35-37.68,68.35s16.76-13.81,22.41-10.95C299.94,207.36,307.44,200.73,314.76,199.43Z" transform="translate(0 -123.55)" fill="#fff"/>
<polygon points="308.81 23.17 312.06 59.93 317.12 78.23 316.18 106.86 340.29 135.1 326.89 181.38 351.82 194.87 363.95 247.32 401.94 271.96 485.99 271.96 308.81 23.17" opacity="0.3"/>
<path d="M325.84,192.22" transform="translate(0 -123.55)"/>
</g>
<g id="Mountain_1" data-name="Mountain 1">
<polygon points="319.46 273.06 136.3 37.42 0 273.08 319.46 273.06" fill="#b66586"/>
<path d="M144.78,222.75c7-2,15.89,8.36,23.06,7.44,4.41-.56,12.22-13,12.22-13L136.34,161l-38,65.61s15.94-11.11,23.3-8C129.41,221.87,135.73,225.33,144.78,222.75Z" transform="translate(0 -123.55)" fill="#fff"/>
<polygon points="151.29 108.31 126.65 165.82 147.88 213.48 202.33 235.9 186.44 254.47 233.91 272.99 319.46 272.99 136.25 37.31 151.29 108.31" fill="#060809" opacity="0.31"/>
</g>
</svg>
</div>
<div class="layer mountains-purple" data-type="parallax" data-depth="0.45">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595.28 245.82">
<g id="Mountain_2" data-name="Mountain 2">
<polygon points="450.97 245.07 303.97 83.48 228.03 0 8.14 245.09 450.97 245.07" fill="#6e517a"/>
<path d="M172.2,205s22.67,15.2,33.63,10.54c6.23-2.65,12.37-5.73,19.3-8.44,4.49-1.75,13.94,4.41,18.75,4.39s14.09-6.22,17.68-9.06c3.77-3,20-.76,19-1.88L228,142.75C227.36,143.39,172.2,205,172.2,205Z" transform="translate(0 -142.75)" fill="#fff"/>
<polygon points="450.94 245.08 228.01 0.01 224.77 56.22 250.01 94.02 233.85 149.37 245.8 183.47 224.28 223.96 309.11 245.04 450.94 245.08" fill="#060809" opacity="0.3"/>
</g>
<g id="Mountain_2-2" data-name="Mountain 2">
<polygon points="197.04 245.33 121.49 154.68 82.47 107.86 0 208.55 0 245.34 197.04 245.33" fill="#6e517a"/>
<polygon points="197.03 245.33 82.46 107.86 80.79 139.39 93.76 160.6 85.46 191.65 91.6 210.77 80.54 233.49 124.14 245.31 197.03 245.33" fill="#060809" opacity="0.3"/>
</g>
<g id="Mountain_3" data-name="Mountain 3">
<polygon points="503.48 245.09 393.7 112.47 389.04 114.03 380.7 126.22 364.02 114.82 351.11 122.2 340.4 114.03 324.8 114.61 218.97 245.09 503.48 245.09" fill="#6e517a"/>
<path d="M351.89,265.12c3.75-1.55,10.47-6.55,14.36-5.8,4.29,0.83,8.61,9.09,12.85,10.08,5,1.18,15.7-13.11,15.7-13.11l-33.9-40.6-37.14,42.94s11-1.1,14.06.26C341.93,260.75,348.23,266.63,351.89,265.12Z" transform="translate(0 -142.75)" fill="#fff"/>
<path d="M360.9,215.7l1.46,44.2,12.28,14.5-13.47,29.11,24.09,24.92-3.87,39.95,37.11,19.34h84.93S360.9,215,360.9,215.7Z" transform="translate(0 -142.75)" fill="#060809" opacity="0.3"/>
</g>
<g id="Mountain_5" data-name="Mountain 5">
<polygon points="595.28 245.8 513.77 95.72 463.43 65.48 419.54 114.92 308.81 245.75 595.28 245.8" fill="#6e517a"/>
<path d="M466.06,261.7c6.89,0.28,18.59-11.68,25.2-15,5.74-2.91,23.31-7,22.51-8.19l-50.33-30.34L426.21,250s9.5-2.07,14.48-1.48C448.16,249.42,459,261.41,466.06,261.7Z" transform="translate(0 -142.75)" fill="#fff"/>
<polygon points="463.43 65.44 477.63 93.28 493.17 119.13 473.33 166.65 517.88 211.53 527.06 245.79 595.28 245.82 513.77 95.73 463.43 65.44" fill="#060809" opacity="0.3"/>
</g>
</svg>
</div>
<div class="layer clouds" data-type="parallax" data-depth="0.45">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 0 541.36 298.7">
<g transform="scale(0.7)">
<g class="cloud one">
<rect x="8.21" y="112.85" width="65.14" height="27.3" rx="13.65" ry="13.65" fill="#fff"/>
<ellipse cx="20.26" cy="124.55" rx="16.89" ry="14.94" fill="#fff"/>
<ellipse cx="46.64" cy="113.47" rx="18.14" ry="14.94" fill="#fff"/>
</g>
<g class="cloud two">
<rect x="475.78" y="130.14" width="65.57" height="28.56" rx="14.28" ry="14.28" fill="#fff"/>
<circle cx="495.54" cy="134.41" r="10.66" fill="#fff"/>
<ellipse cx="514.36" cy="139.84" rx="18.83" ry="16.08" fill="#fff"/>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-130 0 501.36 238.7">
<g transform="scale(0.6)">
<g id="balloon" class="floating" >
<path d="M515.8,57.8h0Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<path d="M513.76,57.18s-9.85,16.57-13,23.45c-0.15.33-.29,0.64-0.4,0.92l0,0.11H484.68l0,0h0c-2.54-6.11-13.42-24.42-13.42-24.42s-5.19-7.42-4.79-13.32c0-13.67,11.63-24.75,26-24.8h0.76l1.18,0.06c0.64,0,1.27.11,1.89,0.2,12.6,1.76,22.27,12.07,22.27,24.53C518.94,49.76,513.76,57.18,513.76,57.18Z" transform="translate(-43.36 -15.58)" fill="#72c4be"/>
<path d="M508.61,57.18s-7.44,16.57-9.82,23.45c-0.13.37-.25,0.71-0.34,1H486.63c-0.1-.31-0.21-0.65-0.34-1-2.38-6.87-9.82-23.45-9.82-23.45s-3.92-7.42-3.62-13.32c0-13.33,8.36-24.2,18.85-24.77l0.52,0h0.58c0.39,0,.78,0,1.17.06,10.21,0.94,18.26,11.65,18.26,24.73C512.53,49.76,508.61,57.18,508.61,57.18Z" transform="translate(-43.36 -15.58)" fill="#fff"/>
<path d="M499.76,57.37S496.42,74,495.34,80.94c-0.05.37-5.56,0.37-5.62,0-1.07-6.91-4.42-23.57-4.42-23.57A63.81,63.81,0,0,1,483.68,44c0-13,3.56-23.74,8.1-24.83a2.32,2.32,0,0,1,.38-0.07l0.13,0h0.54l0.22,0c4.66,0.75,8.35,11.6,8.35,24.88A63.81,63.81,0,0,1,499.76,57.37Z" transform="translate(-43.36 -15.58)" fill="#72c4be"/>
<path d="M500.32,81.65l0,0.09v0a1.5,1.5,0,0,1-.17.26h0c-1,1.19-4,1.47-7.11,1.51h-0.78c-2.79,0-5.53-.14-6.87-1.11a2.17,2.17,0,0,1-.55-0.55l-0.07-.13,0-.05h0a1.68,1.68,0,0,1,0-.51c0-.16,0-0.28,0-0.28h15.55A0.64,0.64,0,0,1,500.32,81.65Z" transform="translate(-43.36 -15.58)" fill="#72c4be"/>
<path d="M489.09,84.77h0V83.52h0a3.36,3.36,0,0,1,1.28.27A1.49,1.49,0,0,1,489.09,84.77Z" transform="translate(-43.36 -15.58)" fill="#fbc73a"/>
<circle cx="446.88" cy="67.08" r="0.35" fill="#fbc73a"/>
<path d="M491.15,90a3.43,3.43,0,0,1-1.85.5h0A1,1,0,0,1,491.15,90Z" transform="translate(-43.36 -15.58)" fill="#fbc73a"/>
<path d="M492.56,87.28a0.67,0.67,0,0,1,0-.15C492.55,87,492.57,87.09,492.56,87.28Z" transform="translate(-43.36 -15.58)" fill="#fbc73a"/>
<path d="M491.29,90.47h-2A1,1,0,0,1,491.29,90.47Z" transform="translate(-43.36 -15.58)" fill="#f4992b"/>
<g id="Eye">
<circle cx="446.88" cy="67.08" r="0.35" fill="#010101"/>
<circle cx="446.98" cy="67.01" r="0.1" fill="#fff"/>
</g>
<polygon points="445.73 69.19 445.73 69.19 445.73 69.19 445.73 69.19" fill="#f59f28"/>
<path d="M491.57,84.32a5.84,5.84,0,0,1-.14-1.65,2.58,2.58,0,0,0-.8-1.66,2.54,2.54,0,0,0-3.1,0,2.57,2.57,0,0,0-.79,1.66,5.87,5.87,0,0,1-.14,1.65c-0.38.93-2,2.77-1.67,3.72a1.22,1.22,0,0,0,.68-0.76c0-.19,0-0.26,0-0.15a0.63,0.63,0,0,1,0,.15A3.44,3.44,0,0,0,487,90a1,1,0,0,1,1.87.5h0.37a1,1,0,0,1,1.87-.5,3.43,3.43,0,0,0,1.41-2.69,0.67,0.67,0,0,1,0-.15c0-.11,0,0,0,0.15a1.22,1.22,0,0,0,.68.76C493.55,87.09,492,85.26,491.57,84.32Zm-4-1.66a0.35,0.35,0,1,1,.35.35A0.35,0.35,0,0,1,487.59,82.66Zm1.5,2.11h0a1.49,1.49,0,0,1-1.28-1,3.36,3.36,0,0,1,1.28-.27h0a3.36,3.36,0,0,1,1.28.27A1.49,1.49,0,0,1,489.09,84.77ZM490.24,83a0.35,0.35,0,1,1,.35-0.35A0.35,0.35,0,0,1,490.24,83Z" transform="translate(-43.36 -15.58)" fill="#fbc73a"/>
<path d="M485.63,87.13a0.63,0.63,0,0,1,0,.15C485.61,87.09,485.63,87,485.63,87.13Z" transform="translate(-43.36 -15.58)" fill="#fbc73a"/>
<circle cx="444.58" cy="67.08" r="0.35" fill="#fbc73a"/>
<path d="M488.91,90.47h0A3.43,3.43,0,0,1,487,90,1,1,0,0,1,488.91,90.47Z" transform="translate(-43.36 -15.58)" fill="#fbc73a"/>
<path d="M489.09,84.77h0a1.49,1.49,0,0,1-1.28-1,3.36,3.36,0,0,1,1.28-.27h0v1.25Z" transform="translate(-43.36 -15.58)" fill="#fbc73a"/>
<path d="M488.91,90.47h-2A1,1,0,0,1,488.91,90.47Z" transform="translate(-43.36 -15.58)" fill="#f4992b"/>
<g id="Eye-2" data-name="Eye">
<circle cx="444.57" cy="67.08" r="0.35" fill="#010101"/>
<circle cx="444.66" cy="66.99" r="0.1" fill="#fff"/>
</g>
<path d="M490.37,83.79a1.49,1.49,0,0,1-1.28,1h0a1.49,1.49,0,0,1-1.28-1A3.22,3.22,0,0,1,490.37,83.79Z" transform="translate(-43.36 -15.58)" fill="#f4992b"/>
<polygon points="445.74 69.19 445.74 69.19 445.74 69.19 445.73 69.19 445.74 69.19 445.74 69.19" fill="#f59f28"/>
<path d="M485.81,87a0.67,0.67,0,0,1,0-.15C485.8,86.7,485.82,86.77,485.81,87Z" transform="translate(-43.36 -15.58)" fill="#fbc73a"/>
<path d="M491.57,84.32a5.84,5.84,0,0,1-.14-1.65,2.58,2.58,0,0,0-.8-1.66,2.39,2.39,0,0,0-1.55-.53h0v4.29h0v5.69h2.2a1,1,0,0,0-.14-0.5,3.43,3.43,0,0,0,1.41-2.69,0.67,0.67,0,0,1,0-.15c0-.11,0,0,0,0.15a1.22,1.22,0,0,0,.68.76C493.54,87.09,492,85.26,491.57,84.32ZM490.24,83a0.35,0.35,0,1,1,.35-0.35A0.35,0.35,0,0,1,490.24,83Z" transform="translate(-43.36 -15.58)" opacity="0.15"/>
<polygon points="456.47 71.94 453.62 82.99 444.45 82.99 441.77 71.94 456.47 71.94" fill="#72c4be"/>
<path d="M492.6,19h0Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<path d="M494.28,19.07c-0.51,0-1-.05-1.55-0.06H493C493.41,19,493.85,19,494.28,19.07Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<rect x="448.79" y="67.96" width="0.9" height="4.64" fill="#72c4be"/>
<rect x="498.86" y="81.69" width="0.9" height="6.29" transform="translate(-23.42 -94.17) rotate(9.18)" fill="#72c4be"/>
<rect x="485.28" y="81.3" width="0.9" height="6.59" transform="translate(-50.47 83) rotate(-11.51)" fill="#72c4be"/>
<g opacity="0.5">
<path d="M516.91,60.42h0Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<path d="M492.38,19h0Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<path d="M492.41,19h0Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<path d="M513.76,57.17s-9.84,16.58-13,23.45c-0.15.33-.29,0.64-0.4,0.92a0.31,0.31,0,0,0,0,.1h-7.84V19h0.73c0.4,0,.79,0,1.18.06,0.64,0,1.27.11,1.89,0.2,12.6,1.76,22.27,12.07,22.27,24.53C518.95,49.75,513.76,57.17,513.76,57.17Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<path d="M492.33,19a0,0,0,0,0,0,0h0Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<path d="M492.38,19h0Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<path d="M508.62,57.17s-7.45,16.58-9.82,23.45c0,0.1-.07.19-0.1,0.28q-0.13.39-.24,0.75h-6V19h0.36a10.56,10.56,0,0,1,1.13.06c10.22,0.94,18.26,11.65,18.26,24.73C512.54,49.75,508.62,57.17,508.62,57.17Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<polygon points="456.47 71.92 453.62 82.98 449.12 82.98 449.12 71.9 456.47 71.92" fill="#2a7e7e"/>
<path d="M492.41,19h0Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<path d="M499.77,57.37S496.43,74,495.35,80.9v0c0,0.19-1.46.29-2.87,0.29V19h0.33s0,0,0,0l0.21,0c4.66,0.75,8.36,11.59,8.36,24.88A64.27,64.27,0,0,1,499.77,57.37Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<path d="M500.32,81.64h0a0.3,0.3,0,0,1,0,.08v0a0.08,0.08,0,0,0,0,0,1.71,1.71,0,0,1-.15.22,1.6,1.6,0,0,1-.38.35,2.38,2.38,0,0,1-.52.31,7.24,7.24,0,0,1-1.83.53,29,29,0,0,1-4.38.32h-0.52V80.9h7.8A0.64,0.64,0,0,1,500.32,81.64Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<path d="M492.71,19h0Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<path d="M494.29,19.06c-0.51,0-1-.05-1.55-0.06H493C493.41,19,493.85,19,494.29,19.06Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<rect x="449.12" y="67.94" width="0.57" height="4.64" fill="#2a7e7e"/>
<rect x="496.16" y="84.37" width="6.29" height="0.9" transform="matrix(0.16, -0.99, 0.99, 0.16, 292.55, 548.62)" fill="#2a7e7e"/>
</g>
<path d="M491.3,15.64h0Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<path d="M491.41,15.63h0Z" transform="translate(-43.36 -15.58)" fill="#2a7e7e"/>
<rect x="448.11" width="0.01" height="0.01" fill="#2a7e7e"/>
</g>
</g>
</svg>
</div>
<div class="layer hills" data-type="parallax" data-depth="0.55">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595.28 146.18">
<g id="Hill_1" data-name="Hill 1">
<path d="M249.73,332.75H22.17c55-12.46,58-45.21,113.78-44.15C191.69,287.54,194.78,320.29,249.73,332.75Z" transform="translate(0 -257.67)" fill="#72c4be"/>
<g opacity="0.5">
<path d="M249.73,332.66H136V288.51C191.69,287.46,194.78,320.21,249.73,332.66Z" transform="translate(0 -257.67)" fill="#2a7e7e"/>
</g>
</g>
<g id="Hill_1-2" data-name="Hill 1">
<path d="M565,332.75H300.78c63.8-14.44,67.38-52.42,132.11-51.19C497.6,280.33,501.18,318.3,565,332.75Z" transform="translate(0 -257.67)" fill="#72c4be"/>
<g opacity="0.5">
<path d="M565,332.65H432.89V281.46C497.6,280.23,501.18,318.21,565,332.65Z" transform="translate(0 -257.67)" fill="#2a7e7e"/>
</g>
</g>
<g id="Hill_2" data-name="Hill 2">
<path d="M378.48,332.71H188.09c46-9.78,48.55-35.49,95.2-34.66C329.92,297.22,332.5,322.93,378.48,332.71Z" transform="translate(0 -257.67)" fill="#fbc73a"/>
<path d="M378.38,332.71H283.19V298.05C329.82,297.22,332.4,322.93,378.38,332.71Z" transform="translate(0 -257.67)" fill="#f4992b"/>
</g>
<g id="House">
<polygon points="385.78 61.84 373.59 51.75 362.15 61.82 362.15 75.01 385.78 75.01 385.78 61.84" fill="#603f16"/>
<polygon points="385.81 61.44 373.5 49.99 362.15 61.61 362.15 65.24 373.53 54.14 385.78 65.31 385.81 61.44" opacity="0.2"/>
<polygon points="387.14 59.91 373.5 47.8 360.79 59.88 360.79 64.39 373.53 51.8 387.14 64.37 387.14 59.91" fill="#342312"/>
<rect x="369.3" y="326.13" width="8.45" height="4.63" transform="translate(45.08 444.31) rotate(-90)" fill="#342312"/>
<rect x="377.92" y="48.47" width="3.01" height="7.12" fill="#342312"/>
<g opacity="0.3">
<polygon points="385.8 63.08 385.78 65.26 385.78 63.06 385.8 63.08" opacity="0.2"/>
<polygon points="387.14 59.86 387.14 64.32 385.8 63.08 385.78 63.06 385.78 74.95 373.49 75.01 373.49 47.78 377.93 51.68 377.93 48.42 380.93 48.42 380.93 54.34 387.14 59.86"/>
</g>
</g>
<g class="bubbles">
<g id="greyJets" fill="#2d2d2d" opacity="0.6">
<circle class="jetBubble" cx="391.26" cy="44.03" r="8.97" fill="#9d9d9c"/>
<circle class="jetBubble" cx="400.53" cy="44.81" r="8.97" fill="#9d9d9c"/>
<circle class="jetBubble" cx="406.45" cy="39.47" r="8.97" fill="#9d9d9c"/>
</g>
<g id="colorJets" stroke-width="0" stroke="#3d3d3d">
<circle class="jetBubble" cx="382.73" cy="41.62" r="8.3" fill="#fff"/>
<circle class="jetBubble" cx="386.87" cy="45.17" r="6.15" fill="#fff"/>
<circle class="jetBubble" cx="386.96" cy="34.5" r="7.15"fill="#fff"/>
<circle class="jetBubble" cx="392.95" cy="36.8" r="10.22" fill="#fff"/>
<circle class="jetBubble" cx="398.93" cy="38.43" r="9.37"fill="#fff"/>
<circle class="jetBubble" cx="402.97" cy="34.28" r="8.24" fill="#fff"/>
</g>
</g>
<g id="Trees">
<path d="M109.22,322.66c-1.9,1-3.95,1.2-7.66.06-0.17-.05-0.28-7.32-0.35-16-0.26,8.72-.52,16-0.69,16.09-3.74,1.06-5.78.86-7.66-.23-12.25-7.11,3.74-36.33,7.82-43.19l0.46-.77,0.38,0.67C105.46,286.25,121.63,315.83,109.22,322.66Z" transform="translate(0 -257.67)" fill="#fbc73a"/>
<path d="M100.09,332.64h1.77l-0.72-24.42a0.07,0.07,0,1,0,0,0l-1.06,24.43h0Z" transform="translate(0 -257.67)" fill="#8a5919"/>
<path d="M109.23,322.67c-1.9,1-3.95,1.2-7.66.06-0.17-.05-0.34-7.27-0.42-15.95,0,0.76,0,1.47,0,2.21V278.63l0.38,0.67C105.46,286.26,121.63,315.84,109.23,322.67Z" transform="translate(0 -257.67)" fill="#f4992b"/>
<path d="M158.91,286.41c-0.85.47-1.76,0.53-3.41,0-0.07,0-.12-3.26-0.16-7.12-0.12,3.88-.23,7.14-0.31,7.17-1.66.47-2.58,0.38-3.41-.1-5.46-3.16,1.66-16.18,3.48-19.24l0.21-.34,0.17,0.3C157.24,270.2,164.44,283.37,158.91,286.41Z" transform="translate(0 -257.67)" fill="#fbc73a"/>
<path d="M154.84,290.85h0.79L155.31,280a0,0,0,1,0,0,0l-0.47,10.88h0Z" transform="translate(0 -257.67)" fill="#8a5919"/>
<path d="M158.91,286.41c-0.85.47-1.76,0.53-3.41,0-0.07,0-.15-3.24-0.19-7.1,0,0.34,0,.66,0,1V266.8l0.17,0.3C157.24,270.2,164.44,283.37,158.91,286.41Z" transform="translate(0 -257.67)" fill="#f4992b"/>
<path d="M449.94,278c-0.88.48-1.82,0.55-3.53,0-0.08,0-.13-3.37-0.16-7.37-0.12,4-.24,7.4-0.32,7.42-1.72.49-2.67,0.4-3.53-.11-5.65-3.28,1.72-16.75,3.61-19.92l0.21-.36,0.18,0.31C448.2,261.19,455.65,274.83,449.94,278Z" transform="translate(0 -257.67)" fill="#fbc73a"/>
<path d="M445.72,282.57h0.82l-0.33-11.26a0,0,0,1,0,0,0l-0.49,11.27h0Z" transform="translate(0 -257.67)" fill="#8a5919"/>
<path d="M449.94,278c-0.88.48-1.82,0.55-3.53,0-0.08,0-.16-3.35-0.19-7.35,0,0.35,0,.68,0,1v-14l0.18,0.31C448.2,261.19,455.65,274.83,449.94,278Z" transform="translate(0 -257.67)" fill="#f4992b"/>
<path d="M173.66,321c-0.82.45-1.71,0.52-3.32,0-0.07,0-.12-3.17-0.15-6.93-0.11,3.78-.23,7-0.3,7-1.62.46-2.51,0.37-3.32-.1-5.31-3.08,1.62-15.74,3.39-18.72l0.2-.33,0.17,0.29C172,305.22,179,318,173.66,321Z" transform="translate(0 -257.67)" fill="#fbc73a"/>
<path d="M169.7,325.32h0.77l-0.31-10.58a0,0,0,1,0,0,0l-0.46,10.59h0Z" transform="translate(0 -257.67)" fill="#8a5919"/>
<path d="M173.66,321c-0.82.45-1.71,0.52-3.32,0-0.07,0-.15-3.15-0.18-6.91,0,0.33,0,.64,0,1V301.91l0.17,0.29C172,305.22,179,318,173.66,321Z" transform="translate(0 -257.67)" fill="#f4992b"/>
<polygon points="144.75 29 133.19 29 138.97 18.64 144.75 29" fill="#1b7891"/>
<polygon points="144.15 26.35 133.79 26.35 138.97 17.06 144.15 26.35" fill="#258ca5"/>
<polygon points="143.16 23.43 134.78 23.43 138.97 16.74 143.16 23.43" fill="#1b7891"/>
<g opacity="0.18">
<polygon points="138.97 16.74 138.97 29 133.19 29 134.68 26.35 133.79 26.35 135.42 23.43 134.79 23.43 138.97 16.74"/>
</g>
<rect x="138.22" y="286.67" width="1.52" height="3.07" transform="translate(277.95 318.73) rotate(180)" fill="#603f16"/>
<polygon points="474.81 66.82 499.4 66.82 487.11 39.26 474.81 66.82" fill="#1b7891"/>
<polygon points="476.08 59.77 498.13 59.77 487.11 35.05 476.08 59.77" fill="#258ca5"/>
<polygon points="478.2 52 496.01 52 487.11 34.2 478.2 52" fill="#1b7891"/>
<g opacity="0.18">
<polygon points="487.1 34.2 487.1 66.82 499.39 66.82 496.24 59.77 498.12 59.77 494.66 52.01 495.99 52.01 487.1 34.2"/>
</g>
<rect x="485.49" y="66.82" width="3.23" height="8.16" fill="#603f16"/>
<polygon points="533.83 64.66 565.07 64.66 549.45 29.64 533.83 64.66" fill="#1b7891"/>
<polygon points="535.45 55.7 563.46 55.7 549.45 24.3 535.45 55.7" fill="#258ca5"/>
<polygon points="538.14 45.83 560.76 45.83 549.45 23.22 538.14 45.83" fill="#1b7891"/>
<g opacity="0.18">
<polygon points="549.44 23.22 549.44 64.66 565.06 64.66 561.06 55.71 563.45 55.71 559.04 45.84 560.74 45.84 549.44 23.22"/>
</g>
<rect x="547.29" y="64.66" width="4.1" height="10.37" fill="#603f16"/>
<path d="M149.69,289.84c-0.82.45-1.71,0.52-3.32,0-0.07,0-.12-3.17-0.15-6.93-0.11,3.78-.23,7-0.3,7-1.62.46-2.51,0.37-3.32-.1-5.31-3.08,1.62-15.74,3.39-18.72l0.2-.33,0.17,0.29C148.06,274.06,155.06,286.88,149.69,289.84Z" transform="translate(0 -257.67)" fill="#fbc73a"/>
<path d="M145.73,294.16h0.77l-0.31-10.58a0,0,0,1,0,0,0l-0.46,10.59h0Z" transform="translate(0 -257.67)" fill="#8a5919"/>
<path d="M149.69,289.84c-0.82.45-1.71,0.52-3.32,0-0.07,0-.15-3.15-0.18-6.91,0,0.33,0,.64,0,1V270.76l0.17,0.29C148.06,274.06,155.06,286.88,149.69,289.84Z" transform="translate(0 -257.67)" fill="#f4992b"/>
<path d="M526,321c-2.21,1.22-4.59,1.39-8.91.06-0.19-.06-0.32-8.51-0.41-18.6-0.3,10.14-.61,18.66-0.8,18.71-4.35,1.23-6.73,1-8.91-.27-14.25-8.26,4.35-42.25,9.1-50.24l0.54-.9,0.45,0.78C521.58,278.7,540.38,313.1,526,321Z" transform="translate(0 -257.67)" fill="#fbc73a"/>
<path d="M515.33,332.64h2.06l-0.84-28.4a0.08,0.08,0,1,0,0,0l-1.23,28.42h0Z" transform="translate(0 -257.67)" fill="#603f16"/>
<path d="M526,321c-2.21,1.22-4.59,1.39-8.91.06-0.19-.06-0.4-8.46-0.49-18.55,0,0.89,0,1.71,0,2.57V269.83l0.45,0.78C521.59,278.7,540.38,313.11,526,321Z" transform="translate(0 -257.67)" fill="#f4992b"/>
<polygon points="314.78 70.84 327.38 70.84 321.08 56.72 314.78 70.84" fill="#1b7891"/>
<polygon points="315.43 67.23 326.73 67.23 321.08 54.56 315.43 67.23" fill="#258ca5"/>
<polygon points="316.52 63.25 325.64 63.25 321.08 54.12 316.52 63.25" fill="#1b7891"/>
<g opacity="0.18">
<polygon points="321.08 54.12 321.08 70.85 327.38 70.85 325.76 67.23 326.73 67.23 324.95 63.25 325.64 63.25 321.08 54.12"/>
</g>
<rect x="320.25" y="70.84" width="1.65" height="4.18" fill="#603f16"/>
<polygon points="53.33 63.5 88.05 63.5 70.69 24.58 53.33 63.5" fill="#1b7891"/>
<polygon points="55.12 53.54 86.25 53.54 70.69 18.64 55.12 53.54" fill="#258ca5"/>
<polygon points="58.12 42.57 83.26 42.57 70.69 17.44 58.12 42.57" fill="#1b7891"/>
<g opacity="0.18">
<polygon points="70.67 17.44 70.67 63.5 88.04 63.5 83.59 53.55 86.24 53.55 81.35 42.59 83.24 42.59 70.67 17.44"/>
</g>
<rect x="68.4" y="63.5" width="4.56" height="11.52" fill="#603f16"/>
<polygon points="29.49 66 56.68 66 43.09 35.52 29.49 66" fill="#1b7891"/>
<polygon points="30.9 58.2 55.28 58.2 43.09 30.87 30.9 58.2" fill="#258ca5"/>
<polygon points="33.24 49.61 52.93 49.61 43.09 29.93 33.24 49.61" fill="#1b7891"/>
<g opacity="0.18">
<polygon points="43.08 29.93 43.08 66 56.68 66 53.19 58.21 55.27 58.21 51.44 49.62 52.92 49.62 43.08 29.93"/>
</g>
<rect x="41.29" y="66" width="3.57" height="9.02" fill="#603f16"/>
<polygon points="406.81 69.07 424.63 69.07 415.72 49.1 406.81 69.07" fill="#1b7891"/>
<polygon points="407.73 63.95 423.7 63.95 415.72 46.05 407.73 63.95" fill="#258ca5"/>
<polygon points="409.27 58.33 422.17 58.33 415.72 45.44 409.27 58.33" fill="#1b7891"/>
<g opacity="0.18">
<polygon points="415.71 45.44 415.71 69.07 424.62 69.07 422.34 63.96 423.7 63.96 421.19 58.34 422.16 58.34 415.71 45.44"/>
</g>
<rect x="414.54" y="69.06" width="2.34" height="5.91" fill="#603f16"/>
<polygon points="421.94 25.11 430.59 25.11 426.27 15.42 421.94 25.11" fill="#1b7891"/>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0