TweenMax+svg实现赛手路上骑自行车动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：TweenMax+svg实现赛手路上骑自行车动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
<style>
#Layer_1 { 
				height: 100%;
				width: 100%;
			}
			body { 
				background-color: #FFF;	
				overflow: hidden; 				
				text-align: center; 
			}
			body, html { 			
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
				
			}			
			svg { 
				 display: inline-block;				 
			}	
			text { 
				font-family: 'Comfortaa', cursive;
			}
</style>


  
  
</head>

<body >
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="630.5px" height="500.5px" viewBox="0 0 630.5 500.5" enable-background="new 0 0 630.5 500.5" xml:space="preserve">
<g id="bicycle">
	<g id="innerLeg">
		<g id="lowerLeftG">
			<g>
				<path fill="#FFEA71" d="M303.084,363l-4.104,7.576c-1.478,5.322,1.639,10.833,6.96,12.313l5.783,1.603
					c5.32,1.478,2.398-3.021,3.877-8.343l5.173-17.773L304.5,352.75L303.084,363z"/>
				<path fill="#DEA47F" d="M340.064,294.061l-5.78-1.604c-5.323-1.479-10.834,1.641-12.313,6.962l-0.791,11.34l-7.466,8.571
					l-6.646,10.65l-1,12.459L304.5,352.75l16.273,5.625l26.25-52.007C348.503,301.048,345.383,295.538,340.064,294.061z"/>
			</g>
			<g id="innerShoe">
				<path fill="#00BCD4" d="M335.807,400.416c5.683-0.697,10.922-3.982,13.504-7.086c-0.44-0.454-1-0.809-1.694-0.986
					c-1.399-0.359-2.839-0.646-4.274-0.783c-3.164-0.322-19.611-14.983-19.85-15.577c-0.189-0.486-4.571-2.977-6.5-2.094
					c-1.774,0.813-3.523,1.715-5.392,2.26c-1.854,0.541-3.703,0.834-5.578,0.363c-1.697-0.434-2.974-1.461-3.92-2.986
					c-0.701-1.127-2.724-5.788-3.708-5.271c-1.904,0.989-3.603,2.248-4.752,4.221c-1.463,2.506-2.415,5.217-2.931,8.088
					c-0.234,1.312-0.325,2.67-0.766,3.901c-0.396,1.105-0.847,2.2-1.074,3.354c-0.001,0.004-0.001,0.007-0.002,0.011
					c3.757,1.879,12.737,6.045,19.548,6.646C317.25,395.251,329.029,401.25,335.807,400.416z"/>
				<path fill="#FFEA71" d="M349.311,393.33c-2.582,3.104-7.822,6.389-13.504,7.086c-6.775,0.834-18.557-5.165-27.39-5.943
					c-6.812-0.602-15.792-4.768-19.548-6.646c-0.354,1.781-0.334,3.523,0.565,5.114c0.727,1.283,1.919,1.863,3.146,2.339
					c4.776,1.854,9.698,3.147,14.819,3.62c0.711,0.066,18.244,5.122,18.946,5.292c1.794,0.441,8.7,1.438,9.175,1.418
					c4.521-0.178,8.664-1.674,12.41-4.564c0.615-0.479,1.155-1.054,1.646-1.683C350.868,397.705,350.816,394.889,349.311,393.33z"/>
			</g>
		</g>
		<g id="upperLeft">
			<path fill="#010101" d="M305.137,218.283c-1.586-5.296-7.157-8.299-12.448-6.716l-5.749,1.729
				c-5.291,1.584-8.294,7.158-6.711,12.449l33.485,69.519l28.679-14.091L305.137,218.283z"/>
			<path fill="#DEA47F" d="M348.239,299.54l-5.847-18.367l-28.68,14.091l7.467,15.498c1.586,5.29,7.156,8.295,12.448,6.711
				l5.748-1.728C344.665,314.159,349.053,306.469,348.239,299.54z"/>
		</g>
	</g>
  
  <g id="roadMarks">
		<path fill="#00A2DB" d="M625.584,428.031c0,0.828-0.541,1.5-1.209,1.5h-17.582c-0.668,0-1.209-0.672-1.209-1.5l0,0
			c0-0.828,0.541-1.5,1.209-1.5h17.582C625.043,426.531,625.584,427.202,625.584,428.031L625.584,428.031z"/>
		<path fill="#00A2DB" d="M585.584,428.031c0,0.828-0.541,1.5-1.209,1.5h-17.582c-0.668,0-1.209-0.672-1.209-1.5l0,0
			c0-0.828,0.541-1.5,1.209-1.5h17.582C585.043,426.531,585.584,427.202,585.584,428.031L585.584,428.031z"/>
		<path fill="#00A2DB" d="M545.584,428.031c0,0.828-0.541,1.5-1.209,1.5h-17.582c-0.668,0-1.209-0.672-1.209-1.5l0,0
			c0-0.828,0.541-1.5,1.209-1.5h17.582C545.043,426.531,545.584,427.202,545.584,428.031L545.584,428.031z"/>
		<path fill="#00A2DB" d="M505.584,428.031c0,0.828-0.541,1.5-1.209,1.5h-17.582c-0.668,0-1.209-0.672-1.209-1.5l0,0
			c0-0.828,0.541-1.5,1.209-1.5h17.582C505.043,426.531,505.584,427.202,505.584,428.031L505.584,428.031z"/>
		<path fill="#00A2DB" d="M465.584,428.031c0,0.828-0.541,1.5-1.209,1.5h-17.582c-0.668,0-1.209-0.672-1.209-1.5l0,0
			c0-0.828,0.541-1.5,1.........完整代码请登录后点击上方下载按钮下载查看