卡通像素小猫咪跳跃动画特效代码js+html5

给大家分享一款卡通像素小猫咪跳跃动画特效代码js+html5,非常漂亮的一款代码,喜欢的朋友下载试试哦!

下载压缩包,里面有CSS和JS文件,代码亲测无错,直接拿走!

图片[1]-卡通像素小猫咪跳跃动画特效代码js+html5-精品资源网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>kitten</title>

<link rel="stylesheet" href="static/css/style.css">

</head>
<body>

<div class="outer_wrapper">
    <div class="wrapper">

      <div class="cat_wrapper">
        <div class="cat first_pose">
          <div class="cat_head">
            <svg x="0px" y="0px" width="100%" height="100%" viewbox="0 0 76.4 61.2">
              <polygon class="eyes" points="63.8,54.1 50.7,54.1 50.7,59.6 27.1,59.6 27.1,54.1 12.4,54.1 12.4,31.8 63.8,31.8 "></polygon>
              <path d="M15.3,45.9h5.1V35.7h-5.1C15.3,35.7,15.3,45.9,15.3,45.9z M45.8,56.1V51H30.6v5.1H45.8z M61.1,35.7H56v10.2h5.1
                V35.7z M10.2,61.2v-5.1H5.1V51H0V25.5h5.1V15.3h5.1V5.1h5.1V0h5.1v5.1h5.1v5.1h5.1v5.1c0,0,15.2,0,15.2,0v-5.1h5.1V5.1H56V0h5.1v5.1
                h5.1v10.2h5.1v10.2h5.1l0,25.5h-5.1v5.1h-5.1v5.1H10.2z"></path>
            </svg>

          </div>
          <div class="body">
            <svg x="0px" y="0px" width="100%" height="100%" viewbox="0 0 91.7 40.8">
              <path class="st0" d="M91.7,40.8H0V10.2h5.1V5.1h5.1V0h66.2v5.1h10.2v5.1h5.1L91.7,40.8z"></path>
            </svg>

            <div class="tail">
              <svg x="0px" y="0px" width="100%" height="100%" viewbox="0 0 25.5 61.1">
                <polygon class="st0" points="10.2,56 10.2,50.9 5.1,50.9 5.1,40.7 0,40.7 0,20.4 5.1,20.4 5.1,10.2 10.2,10.2 10.2,5.1 15.3,5.1 
                  15.3,0 25.5,0 25.5,10.2 20.4,10.2 20.4,15.3 15.3,15.3 15.3,20.4 10.2,20.4 10.2,40.7 15.3,40.7 15.3,45.8 20.4,45.8 20.4,50.9 
                  25.5,50.9 25.5,61.1 15.3,61.1 15.3,56 "></polygon>
              </svg>
            </div>
          </div>
          
          <div class="front_legs">
            <div class="leg one">
              <svg x="0px" y="0px" width="100%" height="100%" viewbox="0 0 14 30.5">
                <polygon points="15.3,30.5 5.1,30.5 5.1,25.4 0,25.4 0,0 15.3,0 "></polygon>
              </svg>
            </div>
            <div class="leg two">
              <svg x="0px" y="0px" width="100%" height="100%" viewbox="0 0 14 30.5">
                <polygon points="15.3,30.5 5.1,30.5 5.1,25.4 0,25.4 0,0 15.3,0 "></polygon>
              </svg>
            </div>  
          </div>
          
          <div class="back_legs">
            <div class="leg three">
              <svg x="0px" y="0px" width="100%" height="100%" viewbox="0 0 14 30.5">
                <polygon points="15.3,30.5 5.1,30.5 5.1,25.4 0,25.4 0,0 15.3,0 "></polygon>
              </svg>
            </div>
            <div class="leg four">
              <svg x="0px" y="0px" width="100%" height="100%" viewbox="0 0 14 30.5">
                <polygon points="15.3,30.5 5.1,30.5 5.1,25.4 0,25.4 0,0 15.3,0 "></polygon>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="ground"></div>

  </div>

    
  <div class="sign">
     / <a href="javascript:;"></a>
  </div>

<script src="static/js/script.js"></script>

</body>
</html>
© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容