TweenMax+svg实现打高尔夫球进洞动画效果代码-html代码-BFW代码库

TweenMax+svg实现打高尔夫球进洞动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+svg实现打高尔夫球进洞动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
	background-color: #a6ece0;
	overflow: hidden;
	text-align: center;
}

body,
html {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

svg {
	width: 100%;
	height: 100%;
	visibility: hidden;
}

.arc {
	opacity: 0;
}
</style>



</head>

<body  >
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
	<title>golfCourse</title>

	<g class="grass">
		<path d="M728.12,371.4a74.19,74.19,0,0,1,.88,11.43v52.63C729,505.61,671.61,563,601.46,563H180.54C110.39,563,53,505.61,53,435.46V378" fill="#26532b" />
		<path d="M728.32,371.45A127.9,127.9,0,0,1,601,492H180.6c-65.66,0-120.14-50.3-126.81-114.28A127.8,127.8,0,0,1,180.6,237H601c70.13,0,127.5,57.37,127.5,127.5C728.51,366.83,728.44,369.15,728.32,371.45Z" fill="#329e32" />
		<g class="hole">
			<path d="M671,382.5c0,7.46-13.66,13.5-30.5,13.5-10.8,0-20.29-2.49-25.71-6.23-3-2.11-4.79-4.6-4.79-7.27,0-7.46,13.66-13.5,30.5-13.5,14.07,0,25.93,4.22,29.44,10A6.73,6.73,0,0,1,671,382.5Z" fill="#1a1a1a" />
			<path d="M669.94,379c-5.41-3.75-14.91-6.24-25.72-6.24-16.85,0-30.5,6-30.5,13.5a6.68,6.68,0,0,0,1.07,3.55c-3-2.11-4.79-4.6-4.79-7.27,0-7.46,13.66-13.5,30.5-13.5C654.57,369,666.43,373.22,669.94,379Z" fill="#666" />
		</g>
	</g>
	<g class="flag">
		<rect class="pole" x="636" y="36" width="8" height="348" rx="3.91" ry="3.91" fill="#faf3dd" />
		<path class="cloth" d="M783.11,92.17C731.9,120,669.76,108.55,644,147.29l.3-110.77C689.62,31.5,738.27,83.08,783.11,92.17Z" fill="#da2c38" />
	</g>
	<g class="club">
		<rect x="199.25" y="134" width="5" height="255" rx="2.5" ry="2.5" fill=".........完整代码请登录后点击上方下载按钮下载查看