svg实现一个暴利发财小岛效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：svg实现一个暴利发财小岛效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
body, html {
  height: 100%;
  margin: 0;
}
svg {
  max-height: 100%;
}

#front_ripple01,
#back_ripple01 {
	transform-origin: 685.796px 443.26px;
	animation-delay: 0s;
}

#front_ripple02,
#back_ripple02 {
	transform-origin: 685.796px 443.26px;
	animation-delay: -2.5s;
}

#front_ripple03,
#back_ripple03 {
	transform-origin: 685.796px 443.26px;
	animation-delay: -5s;
}

#front_ripple04,
#back_ripple04 {
	transform-origin: 685.796px 443.26px;
	animation-delay: -7.5s;
}

#front_ripple01,
#back_ripple01,
#front_ripple02,
#back_ripple02,
#front_ripple03,
#back_ripple03,
#front_ripple04,
#back_ripple04 {
	animation-name: waves;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

#light {
transform-origin: 838.542px 127.164px;
animation-name: lighthouse;
animation-duration: 10s;
animation-time-function: ease-in-out;
animation-iteration-count: infinite;
}

#windmill {
transform-origin: 838.542px 196.936px;
animation-name: windmill-spin;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

#clouds {
transform-origin:704.088px 303.392px;
animation-name: sun-peak;
animation-duration: 15s;
animation-time-function: ease-in-out;
animation-iteration-count: infinite;
}

#sun {
transform-origin:496.94px 189.719px;
animation-name: sun-fade;
animation-duration: 15s;
animation-time-function: ease-in-out;
animation-iteration-count: infinite;
}

#boat {
transform-origin:509.154px 397.683px;
animation-name: boat-bob;
animation-duration: 7s;
animation-time-function: ease-in-out;
animation-iteration-count: infinite;
}

#wind01 {
stroke-dasharray: 310px;
stroke-dashoffset: 310px;
animation-name: draw-wind01;
animation-duration: 6s;
animation-delay: 2s;
animation-time-function: linear;
animation-iteration-count: infinite;
}

#wind02 {
stroke-dasharray: 220px;
stroke-dashoffset: 220px;
animation-name: draw-wind02;
animation-duration: 6s;
animation-time-function: linear;
animation-iteration-count: infinite;
}

#wind03 {
stroke-dasharray: 220px;
stroke-dashoffset: 220px;
animation-name: draw-wind03;
animation-duration: 6s;
animation-delay: 4s;
animation-time-function: linear;
animation-iteration-count: infinite;
}

@keyframes waves {
	0%{
		transform: scale(1);
		opacity: 0;
		}
		25%{
		opacity: 1;
			}
	100%{
			transform: scale(2);
			opacity: 0;
		}
}

@keyframes lighthouse {
	0% {
		transform: scale(1);
	}
	45% {
		transform: scale(2);
	}
	55% {
		transform: scale(2);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes windmill-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes sun-peak {
	0% {
	transform: translate(10px, 10px);
	}
	40% {
	transform: translate(-30px, -30px);
	}
	60% {
	transform: translate(-30px, -30px);
	}
	100% {
	transform: translate(10px, 10px);
	}
}
@keyframes sun-fade {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 0.5;
	}
	60% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

@keyframes boat-bob {
	0% {
		transform: rotate(0deg) translate(0px, 0px);
	}
	25% {
		transform: rotate(2deg) translate(0px, -3px);
	}
	50% {
		transform: rotate(0deg) translate(0px, 0px);
	}
	75% {
		transform: rotate(2deg) translate(0px, -3px);
	}
	100% {
		transform: rotate(0deg) translate(0px, 0px);
	}
}

@keyframes draw-wind01 {
	0% {
	stroke-dashoffset: 310px;
	}
	50% {
	stroke-dashoffset: -310px;
	}
	100%{
	stroke-dashoffset: -310px;
	}
}

@keyframes draw-wind02 {
	0% {
	stroke-dashoffset: 220px;
	}
	50% {
	stroke-dashoffset: -220px;
	}
	100%{
	stroke-dashoffset: -220px;
	}
}

@keyframes draw-wind03 {
	0% {
	stroke-dashoffset: 220px;
	}
	50% {
	stroke-dashoffset: -220px;
	}
	100%{
	stroke-dashoffset: -220px;
	}
}
</style>


</head>

<body>
  <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="windfall_island" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve">
<style type="text/css">

	.st0{fill:#FFF2CF;}
	.st1{fill:#E0FFFF;}
	.st2{fill:#FFFFFF;}
	.st3{fill:none;stroke:#85FFFF;stroke-width:4;stroke-miterlimit:10;}
	.st4{fill:#FFE69F;}
	.st5{fill:#FFCD40;}
	.st6{fill:#FE857A;}
	.st7{fill:#FE5C4E;}
	.st8{fill:#FEADA6;}
	.st9{fill:none;stroke:#FE5C4E;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st10{fill:#827B9A;}
	.st11{fill:#D5D3DD;}
	.st12{fill:#594F78;}
	.st13{fill:#ACA7BB;}
	.st14{opacity:0.25;fill:#85FFFF;}
	.st15{fill:#FFD6D3;}
	.st16{fill:none;stroke:#594F78;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st17{fill:none;stroke:#594F78;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st18{fill:none;stroke:#85FFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st19{fill:#85FFFF;}
	.st20{opacity:0.5;}
	.st21{fill:#D5F1E2;}
	.st22{fill:#ACE3C5;}
	.st23{fill:#82D6A8;}
	.st24{fill:#59C88B;}
	.st25{fill:none;stroke:#594F78;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st26{fill:none;stroke:#59C88B;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st27{fill:#C2FFFF;}
	.st28{fill:none;stroke:#85FFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<circle id="sun" class="st0" cx="496.94" cy="189.72" r="96.87"/>
<g id="clouds">
	<path class="st1" d="M967.14,463.09c50.32,0,91.26-40.94,91.26-91.26s-40.94-91.26-91.26-91.26c-5.44,0-10.82,0.48-16.1,1.42
		c-7.61-18.58-23.39-32.97-42.83-38.72c-14.55-39.68-52.42-66.9-96.09-66.9c-20.17,0-39.81,6.02-56.43,16.98
		c-5.85-3.47-12.21-6.05-18.86-7.62c-7.53-24.33-30.23-42.05-57-42.05c-24.8,0-46.11,15.21-55.1,36.79
		c-15.22-19.45-38.83-31.43-64.45-31.43c-26.63,0-50.83,12.63-65.97,33.37c-1.93-0.11-3.85-0.17-5.78-0.17
		c-26.17,0-51.28,10.64-69.55,28.99c-38.4,1.48-69.18,33.18-69.18,71.93c0,28.18,16.47,53.09,40.73,64.83v115.09H967.14z"/>
	<path class="st2" d="M983.66,268.81c0-24.58-19.93-44.5-44.5-44.5c-2.63,0-5.2,0.24-7.7,0.68c-12.61-17.09-32.88-28.18-55.75-28.18
		c-6.29,0-12.37,0.85-18.16,2.42c-7.91-19.9-27.32-33.98-50.04-33.98c-23.5,0-43.47,15.06-50.82,36.06
		c-6.23-2.52-13.03-3.91-20.15-3.91c-3.53,0-6.99,0.35-10.33,1c0.3-1.77,0.46-3.59,0.46-5.45c0-18.11-14.68-32.78-32.78-32.78
		s-32.78,14.68-32.78,32.78c0,2.14,0.21,4.22,0.6,6.25c-2.45-0.48-4.99-0.74-7.58-0.74c-13.19,0-24.86,6.49-32.01,16.44
		c-13.42-14.54-32.63-23.66-53.98-23.66c-36.33,0-66.47,26.39-72.37,61.03c-0.35-0.01-0.71-0.03-1.06-0.03
		c-21.76,0-39.4,17.64-39.4,39.4c0,3.38,0.43,6.67,1.23,9.8c-10.15-7.04-22.46-11.17-35.75-11.17c-34.69,0-62.82,28.13-62.82,62.82
		c0,34.69,28.13,62.82,62.82,62.82h524.16V312.93C966.79,310.08,983.66,291.42,983.66,268.81z"/>
</g>
<path id="back_ripple01" class="st3" d="M195.45,443.26c0-26.78,219.54-48.48,490.35-48.48s490.35,21.71,490.35,48.48"/>
<path id="back_ripple02" class="st3" d="M195.45,443.26c0-26.78,219.54-48.48,490.35-48.48s490.35,21.71,490.35,48.48"/>
<path id="back_ripple03" class="st3" d="M195.45,443.26c0-26.78,219.54-48.48,490.35-48.48s490.35,21.71,490.35,48.48"/>
<path id="back_ripple04" class="st3" d="M195.45,443.26c0-26.78,219.54-48.48,490.35-48.48s490.35,21.71,490.35,48.48"/>
<g id="light">
	<circle id="outer" class="st0" cx="838.54" cy="127.16" r="17.56"/>
	<circle id="middle" class="st4" cx="838.54" cy="127.16" r="12.96"/>
	<circle id="inner" class="st5" cx="838.54" cy="127.16" r="7.32"/>
</g>
<g id="buildings_behind">
	<g>
		<g>
			<polygon class="st6" points="1171.57,331.54 1169.14,256.1 1132.71,248.88 1096.28,256.1 1093.84,331.54 1132.71,334.97 			"/>
			<polygon class="st7" points="1132.71,334.97 1171.57,331.54 1169.14,256.1 1132.71,248.88 			"/>
			<polygon class="st8" points="1168.14,328.05 1165.93,259.26 1132.71,252.68 1099.49,259.26 1097.27,328.05 1132.71,331.17 			"/>
			<polygon class="st6" points="1132.71,331.17 1168.14,328.05 1165.93,259.26 1132.71,252.68 			"/>
			<g>
				<line class="st9" x1="1105.27" y1="291.53" x2="1105.27" y2="254.32"/>
				<line class="st9" x1="1126.99" y1="262.38" x2="1126.99" y2="249.74"/>
				<line class="st9" x1="1144.14" y1="274.96" x2="1144.14" y2="250.95"/>
				<line class="st9" x1="1110.42" y1="277.24" x2="1110.42" y2="253.24"/>
				<line class="st9" x1="1159.57" y1="284.1" x2="1159.57" y2="254.38"/>
			</g>
		</g>
		<g>
			<polygon class="st10" points="1132.71,248.88 1169.14,256.1 1176.15,251.29 1162.13,230.85 1150.92,223.64 1132.71,186.37
				1114.49,223.64 1103.28,230.85 1089.27,251.29 1096.28,256.1 			"/>
			<polygon class="st11" points="1132.71,186.37 1114.49,223.64 1103.28,230.85 1089.27,251.29 1096.28,256.1 1132.71,248.88 			"/>
			<path class="st12" d="M1132.71,242.77c0,0-41.69,8.26-43.34,8.58l6.91,4.74l36.43-7.21l36.43,7.21l6.91-4.74L1132.71,242.77z"/>
			<path class="st10" d="M1132.71,242.77c0,0-41.69,8.26-43.34,8.58l6.91,4.74l36.43-7.21V242.77z"/>
			<path class="st13" d="M1143,229.81c0-5.05-4.61-9.14-10.29-9.14s-10.29,4.09-10.29,9.14H1143z"/>
			<path class="st12" d="M1142.41,229.81c0-3.79-4.34-6.86-9.7-6.86s-9.7,3.07-9.7,6.86H1142.41z"/>
			<polygon class="st14" points="1132.71,186.37 1114.49,223.64 1103.28,230.85 1089.27,251.29 1096.28,256.1 1132.71,248.88 			"/>
		</g>
	</g>
	<g>
		<g>
			<polygon class="st6" points="1134.54,376.91 1131.02,267.85 1078.36,257.43 1025.7,267.85 1022.18,376.91 1078.36,381.87 			"/>
			<polygon class="st7" points="1078.36,381.87 1134.54,376.91 1131.02,267.85 1078.36,257.43 			"/>
			<polygon class="st8" points="1129.58,371.86 1126.37,272.42 1078.36,262.92 1030.34,272.42 1027.14,371.86 1078.36,376.38 			"/>
			<polygon class="st6" points="1078.36,376.38 1129.58,371.86 1126.37,272.42 1078.36,262.92 			"/>
			<g>
				<line class="st9" x1="1038.7" y1="319.08" x2="1038.7" y2="265.28"/>
				<line class="st9" x1="1070.1" y1="276.94" x2="1070.1" y2="258.67"/>
				<line class="st9" x1="1094.88" y1="295.12" x2="1094.88" y2="260.42"/>
				&.........完整代码请登录后点击上方下载按钮下载查看