TweenMax+svg铲雪加载进度条动画效果代码
代码语言:html
所属分类:进度条
代码描述:TweenMax+svg铲雪加载进度条动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Snowburst+One" rel="stylesheet"> <style> body { background-color:#8F97A6; overflow: hidden; text-align:center; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } svg{ width:800px; height:600px; visibility:hidden; overflow: visible; } text{ text-anchor:start; font-family:'Snowburst One', cursive; fill:#FFF; font-size:65px; } </style> </head> <body> <svg class="loaderSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -9" result="cm" /> <feBlend/> </filter> <rect class="particle" width="4" height="8" fill="#eee"/> </defs> <line class="cable" x1="0" x2="800" y1="204" y2="204" stroke="#010210" stroke-width="4" stroke-linecap="round"/> <g class="container" /> <g class="squirrel" fill="#312624"> <path d="M53.74,4.49A7.38,7.38,0,0,0,50.84.35,1.28,1.28,0,0,0,49.39.14c-.83.41,0,5-.83,5.39S46.49,8.84,44,9.67s-8.29,0-13.26,3.73-3.52,20.1-3.52,20.1H38.41c1.66,0,2.49-.83,2.9-2.49s-1.24-.41-2.9-.83c2.07-.41,2.49-5,2.49-6.63.83.83,3.73-.41,4.56-.83,0,.83,2.07,4.14,2.49,4.56s.83,4.14,1.66,5a5.75,5.75,0,0,0,3.73,0c.41-.41-.83-1.24-2.49-2.07s0-1.66,0-2.9.24-2.9.24-4.14a18.49,18.49,0,0,0-.24-4.56c-.41-2.07.41-2.49,1.66-5.39,3.32.83,7-.83,7.46-2.9S55.81,5.74,53.74,4.49Z"/> <path class="foot" d="M48.5,19.06a7.18,7.18,0,0,1,1.87,2.59c.44,1.34,1.2,2.75,2.54,2.3s2.81,2.41,2.36,3.3-2.21,1.11-2.25.22,1-1.88-2.22-2.25c-1.77-3.14-4-3.15-3.56-4S48.5,19.06,48.5,19.06Z"/> <path class="tail" d="M14.37,3.66c-4-1.63-7,0-11.19,5.8s-3.73,9.95-1.66,11.6,6.22-1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0