TweenMax实现小人行走走路动画效果代码-html代码-BFW代码库

TweenMax实现小人行走走路动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax实现小人行走走路动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body {
 background-color: #216BB6;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}

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

svg {
 max-width: 100%;
 height: 100%;
 visibility: hidden;
 
}
.bush {
 opacity: 0.2;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
 <defs>
 <g id="pop" class="pop" fill="none" stroke="#F3F1E2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" opacity="1">    
	<circle cx="18.22" cy="17.89" r="0" stroke="#F3F1E2" fill="none"/>
		<line x1="18" y1="10.5" x2="18" y2="0.5"/>
	
		<line x1="18" y1="25.5" x2="18" y2="35.5"/>
	
		<line x1="25.5" y1="18" x2="35.5" y2="18"/>
	
		<line x1="10.5" y1="18" x2="0.5" y2="18"/>
</g>     
<path id="dislike" d="M.63,10.86A2.4,2.4,0,0,0,0,12.52,2.52,2.52,0,0,0,2.51,15H7.38a16.46,16.46,0,0,0-.69,4.23v.85A3.36,3.36,0,0,0,10,23.47h.85a.84.84,0,0,0,.82-.63L12.18,21c.62-2.54,2.66-5.37,4.76-5.87a2.52,2.52,0,0,0,2.33,1.6h5a.83.83,0,0,0,.84-.84V.85A.84.84,0,0,0,24.29,0h-5A2.51,2.51,0,0,0,17,1.44L14.15.5A9.25,9.25,0,0,0,11.23,0H4.17A2.52,2.52,0,0,0,1.66,2.54a2.35,2.35,0,0,0,.19.91A2.51,2.51,0,0,0,.63,7.53,2.42,2.42,0,0,0,0,9.19a2.26,2.26,0,0,0,.63,1.67ZM4.18,10H2.51a.84.84,0,0,1-.84-.85.83.83,0,0,1,.84-.84H4.18a.85.85,0,0,0,0-1.7H2.51A.85.85,0,0,1,2.51,5H4.18a.85.85,0,0,0,0-1.7.85.85,0,1,1,0-1.69h7A7.81,7.81,0,0,1,13.56,2L16.73,3V13.37A6.65,6.65,0,0,0,13,15.81a12.16,12.16,0,0,0-2.45,4.71l-.28,1.19H10a1.67,1.67,0,0,1-1.66-1.66V19.2A13.73,13.73,0,0,1,9.16,15h1.73a.85.85,0,0,0,0-1.7H2.48a.85.85,0,0,1-.85-.85.84.84,0,0,1,.85-.84H4.14A.85.85,0,0,0,5,10.73.83.83,0,0,0,4.18,10Z"/>  
  <path id="bush1" d="M73.88,13.19a13.29,13.29,0,0,0-7.22,2.12A16.74,16.74,0,0,0,48,10.91,26.55,26.55,0,0,0,0,26.58H87.27A13.39,13.39,0,0,0,73.88,13.19Z" fill="#FFF"/>
<path id="bush2" d="M9.88,5.17a9.84,9.84,0,0,1,5.51,1.67A15,15,0,0,1,41.32,8.07,7.5,7.5,0,0,1,43,7.86,7.19,7.19,0,0,1,50.22,15H0A9.87,9.87,0,0,1,9.88,5.17Z" fill="#FFF"/> 
<.........完整代码请登录后点击上方下载按钮下载查看