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-3.........完整代码请登录后点击上方下载按钮下载查看