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.66,8.29-4.14c3.32-2.49,5.39,2.9,8.29,11.19,3.87,6.58,8.46,3.76,9.05,3.36a4.27,4.27,0,0,0,.13-1.68C27.22,29.62,22.12,6.83,14.37,3.66Z"/>
</g>
<text class="display" x="40" y="300">SNOW CLEARED:</text>
<g class="acornGroup" fill="#FFF">
<g class="innerAcorn">
<path d="M94.21,57.62,8.63,56.26c5.82-14.12,10.78-19,43-18.47C83.65,38.3,88.76,42.18,94.21,57.62Zm-80.1,5.72c.48,18.68,7.59,36.78,19.37,49,5.84,6,12.29,9.84,16.84,9.92,14.34.22,36.16-22.54,38.07-57.7l-9.12-.15Zm41.52-33c-2.4-10.54-6-21.46-8.24-23.09A1.21,1.21,0,0,0,46.33,7h0c-1.16.24-2.59,1.56-3.67,2.83,3.9,6.08,8.42,14.43,8.42,20.49C52.72,30.42,54.29,30.42,55.63,30.39Z" fill="#fff" opacity="0.2"/>
<path d="M63,31.2C61.34,23.47,57,5.6,51.47,1.61A8.18,8.18,0,0,0,44.94.17h0c-5.29,1.09-9.09,7.07-9.5,7.75a3.5,3.5,0,0,0,.08,3.78c5.22,7.77,9.22,16.69,8.61,19.09C12.21,31.37,7.57,39.71.24,58.4a3.5,3.5,0,0,0,3.2,4.78l3.68.06c.46,20.5,8.29,40.46,21.32,53.95,7.3,7.55,15.23,11.95,21.76,12.05a22.58,22.58,0,0,0,4.91-.48c18.58-3.82,38.46-30.12,40.26-64.11l3.67.06a3.5,3.5,0,0,0,3.38-4.58C95.81,39.77,90.35,32.89,63,31.2ZM46.32,7h0a1.21,1.21,0,0,1,1.06.27c2.27,1.63,5.84,12.55,8.24,23.09-1.34,0-2.91,0-4.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0