html5 SVG手机移动端底部图标菜单展开动画特效

一款html5 SVG手机移动端底部图标菜单展开动画特效，点击底部菜单的3个点点的图标，可以展开次级的子图标菜单，然后可点击“叉号”图标可以关闭次级菜单内容。

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

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

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

页面的head部分，需引入页面的CSS样式文件和动画JS文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/anime.min.js"></script>

页面的body部分，需设置好对应的SVG内容，代码如下：

<div class="phone">
  <svg xmlns="http://www.w3.org/2000/svg" class="body" width="500" height="400" viewBox="0 0 500.00001 400.00001"><path d="M446-48.656v331.478H68V-48.652C52.55-35.517 43-15.93 43 6.04V316.16c0 39.734 31.965 71.72 71.67 71.72h284.66c39.705 0 71.67-31.986 71.67-71.72V6.04c0-21.97-9.548-41.56-25-54.696z" fill="#0e232e"/></svg>
  <div class="bg"></div>
  <svg class="display" width="375" viewBox="0 0 400 75">
      <path
      id="avatar-bottom"
      d="m 40.471946,55.027233 c 0,0 -3.017416,-8.4852 11.313708,-8.4852 14.331124,0 11.844039,8.4852 11.844039,8.4852 z"
      style="opacity:1;fill:#757575;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<!-- 省略部分演示代码 -->
      <path
      id="X2"
      transform="translate(9)"
      style="opacity:1;fill:#757575;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
      d="m 353,40 c 0,0.828427 -0.33579,1.578427 -0.87868,2.12132 -0.54289,0.542894 -1.29289,0.87868 -2.12132,0.87868 -0.82843,0 -1.57843,-0.335786 -2.12132,-0.87868 -0.54289,-0.542893 -0.87868,-1.292893 -0.87868,-2.12132 0,-0.828427 0.33554,-1.578427 0.87818,-2.12132 0.54264,-0.542894 1.29239,-0.87868 2.12082,-0.87868 0.82843,0 1.57868,0.335786 2.12182,0.87868 0.54314,0.542893 0.87918,1.292893 0.87918,2.12132 z" />
      <rect
      style="opacity:1;fill:transparent;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
      id="click"
      onclick="click();"
      width="100"
      height="90"
      x="300"
      y="0" />
    </svg>
</d

页面的底部，需设置好图标菜单的点击等事件响应，部分代码如下：

var open = false;
var anims = [];

function animsClear() {
  anims.forEach((anim) => {
    anim.pause();
  });
  anims.length = 0;
}

function animOpacity(duration, delay, id, value) {
  anims.push(anime({
    targets: id,
    opacity: {
      value: value,
      duration: duration,
      delay: delay,
      easing: 'easeOutQuad'
    }
  }));
}

function animTranslate(duration, delay, id, value) {
  anims.push(anime({
    targets: id,
    transform: {
      value: `translate(${value})`,
      duration: duration,
      delay: delay,
      easing: 'easeOutQuad'
    }
  }));
}
function animD(duration, delay, id, value, elasticity = 500) {
  anims.push(anime({
    targets: id,
    d: {
      value: value,
      duration: duration,
      delay: delay,
      elasticity: elasticity
    }
  }));
}