动态微交互图标

点击进入代码在线编译

click-path裁剪路径生成：http://tools.jb51.net/code/css3path

代码思路：
icon1（首页icon）：代表门的小方块使用 transform：rotateY(180deg) ，旋转达到开门关门效果
icon2（搜索icon）：最外圈圆形使用transform：rotate3d(1,1,0,90deg)旋转，由于旋转90deg会看不见，加了一个斜线在0.2s动画播放后display设置为block；短线 transform：scale(5,1)，在x方向拉长，
icon3（收藏icon）：使用clicp-path裁剪带背景的五角星
icon4（购物车icon）：两条短线向左，其他向右移
icon5（通知icon）：用clicp-path将svg分别裁剪成两部分
icon6（信息icon）：用clicp-path将 “i” 所在的div裁剪成圆形

svg线条阴影用svg滤镜，<svg filter="url(#f1)">

<defs>
     <filter id="f1" x="0" y="0" width="100%" height="100%">
          <feGaussianBlur  stdDeviation="8"></feGaussianBlur>
          <feMerge>
              <feMergeNode in="offsetBlur" />
              <feMergeNode in="SourceGraphic" />
          </feMerge>
      </filter>
  </defs>