12种常用的动画图标

推荐12种常用的动画图标特效，每个图标都有一个对应的点击变形的动画效果，重复点击会恢复初始状态，变形的图标都基本都是常用的图标，喜欢的童鞋请收下吧。

分类：导航菜单 > 图标导航难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面的样式文件，代码如下：

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

页面的body部分，不难看出基本都用了div容器来放置动画图标，代码如下：

<div class="container">
  <h1>12种常用的动画图标</h1>
  <div class="row cf">
    <div class="three col">
      <div class="hamburger" id="hamburger-1"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-2"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-3"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-4"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
  </div>
  <div class="row cf">
    <div class="three col">
      <div class="hamburger" id="hamburger-5"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-6"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-7"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-8"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
  </div>
  <div class="row cf">
    <div class="three col">
      <div class="hamburger" id="hamburger-9"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-10"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-11"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
    <div class="three col">
      <div class="hamburger" id="hamburger-12"> <span class="line"></span> <span class="line"></span> <span class="line"></span> </div>
    </div>
  </div>
</div>

页面的底部，需引入jQuery库和一个JS文件，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>