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

代码语言:html

所属分类:动画

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

代码标签: 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