<!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美丽小岛平行视差动画</title>
<style>
body {
background: #B4E4ED;
}
.container svg {
margin: 0em auto;
display: inline-block;
position: relative;
width: 100vw;
height: 100%;
}
.liquid {
-webkit-filter: url("#liquid");
filter: url("#liquid");
}
@media (max-width: 480px) {
.container svg {
height: 100%;
min-width: 55em;
left: -50%;
}
}
</style>
</head>
<body>
<div class="container">
<svg version="1.1" x="0" y="0" width="1440" height="934" viewBox="0 0 2880 1803.9" preserveAspectRatio="xMidYMid meet">
<style type="text/css">
.st0 {
fill: #F3B5DD;
}
.st1 {
fill: none;
stroke: #F46D78;
stroke-width: 6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st2 {
fill: #B4E4ED;
}
.st3 {
fill: url(#SVGID_1_);
}
.st4 {
fill: #FFFFFF;
}
.st5 {
opacity: 0.52;
}
.st6 {
opacity: 0.55;
}
.st7 {
fill: url(#SVGID_2_);
}
.st8 {
fill: url(#SVGID_3_);
}
.st9 {
fill: #295071;
}
.st10 {
fill: url(#SVGID_4_);
}
.st11 {
fill: #F5D1C4;
}
.st12 {
fill: url(#SVGID_5_);
}
.st13 {
fill: #A52A35;
}
.st14 {
fill: #DE9285;
}
.st15 {
fill: #112627;
}
.st16 {
fill: url(#SVGID_6_);
}
.st17 {
fill: #FD9F9B;
}
.st18 {
fill: none;
stroke: #F46D78;
stroke-width: 6;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st19 {
fill: none;
stroke: #4182B5;
stroke-width: 4;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st20 {
fill: none;
}
.st21 {
fill: #FAE69A;
}
.st22 {
fill: #689278;
}
.st23 {
fill: #FF5B45;
}
.st24 {
fill: #0B230D;
}
.st25 {
fill: #F46D78;
}
.st26 {
fill: #F1E993;
}
.st27 {
fill: #00838A;
}
.st28 {
fill: #014B6B;
}
.st29 {
opacity: 0.5;
}
.st30 {
fill: #C7F0EF;
}
.st31 {
opacity: 0.45;
}
.st32 {
fill: #5793C0;
}
.st33 {
fill: url(#SVGID_7_);
}
.st34 {
fill: url(#SVGID_8_);
}
.st35 {
fill: url(#SVGID_9_);
}
.st36 {
opacity: 0.65;
fill: #C7F0EF;
}
.st37 {
fill: url(#SVGID_10_);
}
.st38 {
fill: url(#SVGID_11_);
}
.st39 {
opacity: 0.75;
}
.st40 {
fill: #FAE7F4;
}
.st41 {
opacity: 0.12;
fill: #F5D1C4;
}
.st42 {
opacity: 0.15;
fill: #F5D1C4;
}
.st43 {
opacity: 8.000000e-02;
fill: #F5D1C4;
}
.st44 {
opacity: 0.15;
fill: #FFF4F0;
}
.st45 {
fill: #152669;
}
.st46 {
opacity: 0.85;
}
.st47 {
fill: none;
stroke: #FFFFFF;
stroke-width: 2;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.st48 {
fill: url(#SVGID_12_);
}
.st49 {
opacity: 0.12;
}
.st50 {
fill: #F880B8;
}
.st51 {
opacity: 3.000000e-02;
}
.st52 {
opacity: 0.2;
}
.st53 {
fill: url(#SVGID_13_);
}
.st54 {
fill: url(#SVGID_14_);
}
.st55 {
fill: #1E3796;
}
.st56 {
fill: url(#SVGID_15_);
}
.st57 {
fill: url(#SVGID_16_);
}
.st58 {
fill: #E4D5DF;
}
.st59 {
fill: url(#SVGID_17_);
}
.st60 {
fill: #2F3BFF;
}
.st61 {
fill: #73FADE;
}
.st62 {
fill: #5B2AB4;
}
.st63 {
fill: #B87098;
}
.st64 {
fill: #012E42;
}
.st65 {
opacity: 0.4;
}
.st66 {
opacity: 0.8;
fill: url(#auroraGradient);
}
.st67 {
fill: url(#SVGID_19_);
}
.st68 {
fill: url(#SVGID_20_);
}
.st69 {
fill: url(#SVGID_21_);
}
.st70 {
fill: #46A9DE;
}
.st71 {
fill: url(#SVGID_22_);
}
.st72 {
fill: url(#SVGID_23_);
}
.st73 {
fill: #737BFF;
}
.st74 {
fill: #2E56CD;
}
.st75 {
opacity: 0.1;
}
.st76 {
fill: #FA3924;
}
.st77 {
fill: #EC8930;
stroke: #EAB67C;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st78 {
fill: url(#SVGID_24_);
}
.st79 {
fill: url(#SVGID_25_);
}
.st80 {
fill: url(#SVGID_26_);
}
.st81 {
fill: url(#SVGID_27_);
}
.st82 {
fill: url(#SVGID_28_);
}
.st83 {
fill: url(#SVGID_29_);
}
.st84 {
fill: url(#SVGID_30_);
}
.st85 {
fill: url(#SVGID_31_);
}
