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

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

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