TweenMax+svg实现人行走动画效果代码
代码语言:html
所属分类:动画
代码描述:TweenMax+svg实现人行走动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> @import url(https://fonts.googleapis.com/css?family=Oswald); html, body { width: 100%; height: 100%; padding: 0px; margin: 0px; } body { background-color: #efefef; background: radial-gradient(rgb(110 253 253), rgb(0 55 157)); } svg { opacity: 0; overflow: visible; position: absolute; left: 50%; top: 53%; transform: translate(-50%, -50%); } #text { position: absolute; left: 50%; top: 20px; width: 100%; transform: translate(-50%, 0%); font-family: 'Oswald', arial; color: #ED002E; font-size: 50px; font-size: 5.5vw; text-align: center; white-space: nowrap; } #text span { color: #444; font-size: 30px; font-size: 3.5vw; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script> <div id="text"><span>No Matter How Hard it is ,</span> Just Keep Going</div> <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="325" height="325" viewBox="15 0 315 315"> <circle fill="white" cx="172" cy="165" r="150" stroke='rgba(255,255,255,.4)' stroke-width='30'/> <ellipse id="mSH" opacity='.2' cx="175" cy="313" rx="110" ry="10"/> <g id="B"> <g id="UB"> <g id="H"> <path d="M188.8.2c-9.1-.3-16.2 7.3-16.2 15.4 0 8.9 7.2 13.8 7.2 13.8s1.3 3.8 0 6.9c-2.1 4.8-6.6 11.1-6.6 11.1l17.6 8.9s-3.8-8.4-2.2-13.8c.8-2.9 4.7-3.5 6.9-3.1 3.8 3.7 7.7 5.5 9.1 4.6 1.9-1.2 4.9-18.4 4.5-26.8-.4-8.5-9.5-16.3-20.3-17z"/> <g fill='none' stroke='#fff' opacity='0.4'> <path d="M191.1.3s4 4.4 4.9 17.9-.9 21-.9 21"/> <path d="M172.6 16.2s8.2 2.1 19.2 2.4c11.5.3 17.4-1.5 17.4-1.5"/> </g> <g fill='none' stroke='#fff' opacity='0.7' stroke-linecap='round' stroke-width='3' > <path class="st4" d="M181,7.1c-0.8,0.7-1.6,1.4-2.2,2.3"/> <path class="st4" d="M198.6,7.6c-4.1-2.8-9.3-4.3-14-2.6"/> </g> </g> <path d="M196.9 83.1c-1.6 8-2.9 14.6-2.9 14.6l-4.9 46.1-21.9-7.7 3.4-11c.7-3.7.9-8.5.4-12.3-4.272-29.697-8.373-41.774-5.7-52.182 2.043-6.93 9.2-17.518 9.2-17.518s3.7 1.4 6.6 2.2c3.5 1.2 8.3 2.9 8.3 2.9s10 21.9 7.5 34.9z"/> <path class="FB" d="M167.5 132.7c-9 18.6 6.4 27.6 10.6 27.6 6 0 11.8-9.2 12.3-24.1l-22.9-5.7v2.2z"/> </g> <g id="FF"> <path d="M169.2 223.345c.1-.21-.4-2.11 1.4-20.466-1.9-15.51-4.6-39.88-1.2-52.86 2.9-12.66 16.7-15.83 19.1-1.588.4 11.183.4 15.51-2 35.66-4.6 23.313-9.7 39.243-9.8 40.09-.1.525-2.2 2.32-4.4 2.002-1.7.104-3.3-2.217-3.1-2.85z"/> <g class="F1"> <path d="M162.9 307.954s1.2-11.393.3-24.264c-.5-9.284-5.8-30.594-4.7-38.93 6.8-18.777 13.6-23.42 16.4-22.26 1.1.95 1.9 2.322 1.3 4.01-.1.106-3.8 23.632-6 40.3-2.3 18.04.7 41.144.7 41.144h-8z"/> <g class="F2"> <path d="M192.2 316.183s-25.4-16.985-28.8-14.242c-1.4 6.65-11.8 19.1-2.9 22.9 3.3 1.27 7-1.16 8.3-1.37 6.3-1.16 19.1 1.48 20.2 1.48 2.8 0 5.1-1.687 5.1-4.64 0-1.69-.8-3.27-1.9-4.116z"/> <path class="F3" d="M191.7 315.867s-1.5-.528-2.3-.528c-2.6 0-4.6 2.11-4.6 4.85 0 2.42 1.7 4.53 4.1 4.75 0 0 17 .95 17.3-2.64.3-3.38-7.5-2.85-14.5-6.44z"/> </g> </g> </g> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0