js+css3实现的底部导航菜单单击动画特效

所属分类: 网页特效-动画效果    2024-11-20 02:01:30

js+css3实现的底部导航菜单单击动画特效 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

js+css3实现的底部导航菜单单击动画特效(共3个文件)

    • index.html

使用方法

const tabs = document.querySelectorAll(".tab");

const indicator = document.querySelector(".indicator");

const indicator_drop = document.querySelector(".indicator-drop");

tabs.forEach((el) => el.addEventListener("click", clickTab));

const active_tab = document.querySelector("input:checked + label");
indicator.style.left = `${active_tab.offsetLeft + 12}px`;
indicator.style.backgroundColor = "#e2921a";
indicator.style.setProperty("--indicator", "#e2921a");

indicator_drop.style.left = "31px";
indicator_drop.style.top = "75px";
indicator_drop.style.opacity = "0";

function clickTab() {
  let active_tab = document.querySelector("input:checked + label");
  indicator.style.left = `${active_tab.offsetLeft + 12}px`;
  let active_tab_number = active_tab.getAttribute("for");

  indicator.className = "indicator indicator-animation";

  setTimeout(() => {
    indicator_drop.style.top = "55px";
    indicator_drop.style.left = `${active_tab.offsetLeft + 18}px`;
    indicator_drop.style.opacity = "1";
  }, 300);

  setTimeout(() => {
    indicator_drop.style.top = "75px";
    indicator_drop.style.left = "31px";
    indicator_drop.style.opacity = "0";
  }, 500);

  setTimeout(() => {
    indicator.className = "indicator";
  }, 500);

  switch (active_tab_number) {
    case "tab-one":
      indicator.style.backgroundColor = "#e18e1c";
      indicator.style.setProperty("--indicator", "#e18e1c");
      break;
    case "tab-two":
      indicator.style.backgroundColor = "#e3911a";
      indicator.style.setProperty("--indicator", "#e3911a");
      break;
    case "tab-three":
      indicator.style.backgroundColor = "#e1921a";
      indicator.style.setProperty("--indicator", "#e1921a");
      break;
    case "tab-four":
      indicator.style.backgroundColor = "#e39519";
      indicator.style.setProperty("--indicator", "#e39519");
      break;
    default:
      indicator.style.backgroundColor = "#e18e1c";
      indicator.style.setProperty("--indicator", "#e18e1c");
  }
}

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 动画效果

jquery+canvas搜狗指数动画背景热点关键词

热点关键词由远到近的动画运动作为背景,带搜索框,很实用!
  动画效果
 3351  0

纯CSS3实现的X射线悬停动画特效

一款鼠标悬停查看人体各部位骨骼图,鼠标悬停于人物矢量图上,移动鼠标可实时显示当前部位的骨骼图片。
  动画效果
 6107  0

纯CSS3实现的button边框走马灯动画特效

一款按钮边框走马灯动画特效,该按钮集成了三种渐变颜色环绕,分别为亮蓝色、绿色和红色。
  动画效果
 674  0

javascript鼠标跟随五彩缤纷烟花动画特效

基于SVG和VanillaJS创建的Sparkle Motion效果。鼠标移动时产生了五颜六色的烟花特效。鼠标点击、移动或触摸手势后会产生烟花特效。
  动画效果
 2364  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论