HTML5手机移动端底部菜单动态切换特效代码

这套HTML5手机移动端底部菜单动态切换特效代码，基于HTML5和SVG开发制作的，将宽必为AUTO就可以改为自适应的效果，这套手机底部图标菜单在导航切换时背景颜色也会哪着改变，非常的漂亮，想要开发手机端网站的朋友不要错过这套代码。

使用方法：

<script type="text/javascript">
    "use strict";
let body = document.body;
let menu = document.querySelectorAll(".menu__item");
let menuBorder = document.querySelector(".menu__border");
let active;

function clickItem() {
  active = document.querySelector("button.active");

  if (active) {
    active.classList.remove("active");
  }

  this.classList.add("active");
  let box = this.getBoundingClientRect();

  active = this;
  body.style.backgroundColor = active.style.getPropertyValue("--bgColorBody");

  offsetMenuBorder(box, menuBorder);
}

function offsetMenuBorder(box, menuBorder) {
  let left =
    Math.floor(
      box.left -
        menuBorder.closest("menu").offsetLeft -
        (menuBorder.offsetWidth - box.width) / 2
    ) + "px";
  menuBorder.style.transform = `translate3d(${left}, 0 , 0)`;
}

menu.forEach((item) => {
  item.addEventListener("click", clickItem);
});
</script>

效果截图：