TweenMax+svg铲雪加载进度条动画效果代码

代码语言:html

所属分类:进度条

代码描述:TweenMax+svg铲雪加载进度条动画效果代码

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