杰晶网络

HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
网页制作 2024/11/24 佚名
3 2

设计师给了一个 tab 切换的效果图。虽然是一个很小的功能，但是前端工程师在实现的时候还是有很多细节需要注意。我写了一个 demo 给大家参考。

最终实现效果如下：

HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)

为了 gif 动画能够展示细节，我将动画时间延长到了 3 秒

代码分享地址：http://runjs.cn/detail/h2dqt3td

实现思路

间隔竖线，因为不是顶天立地的，所以不能用边框。我准备用伪元素实现。

只有 3 个竖线，但是有 4 个 li ，这个简单，可以用 :not(:first-child) 选择器来选择。

切换的背景颜色变化，因为想要有从小到大的效果，因此，也不能直接使用背景颜色实现，我也准备用伪元素实现。

如果用伪元素的大小来控制，计算会比较复杂，因此，我想用 box-shadow 阴影来实现。

好，大体就是如此了，下面开始写代码，如下：

HTML 代码

  <div class="m">
    <ul class="tab">
      <li><a href="">导航1</a></li>
      <li><a href="">导航2</a></li>
      <li><a href="">导航3</a></li>
      <li><a href="">导航4</a></li>
    </ul>
  </div>

上面的代码结构是之前已经写好的，我看可以，就不做任何调整了。没有什么累赘的代码。

CSS 代码

.m { margin: 100px; }
.tab { width: 400px; margin: 0 auto; border: 1px solid #ddd; height: 40px; text-align: center; line-height: 40px; background: #fff; border-radius: 10px; overflow: hidden; }
.tab li { float: left; width: 100px; position: relative; overflow: hidden; }
.tab li:before, .tab li:after, .tab li a { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
.tab li:before, .tab li:after { content: ""; display: block; }
.tab li:not(:first-child):after { background: #ddd; height: 20px; width: 1px; left: 0; top: 10px; position: absolute; }
.tab li a { display: block; position: relative; z-index: 2; color: #000; font-size: 14px; }
.tab li:before { width: 0; height: 0; top: 50%; left: 50%; z-index: 1; position: absolute; }
.tab li:hover a { color: #fff; }
.tab li:hover:before { box-shadow: 0 0 0 100px #36bc99; }
.tab li:hover + li:after, .tab li:hover:after { height: 0; top: 20px; }

代码分析：

动画实现非常简单，只要使用 transition 属性即可。

控制自己的伪元素和下一个同级元素的伪元素，只需要使用 + 选择器即可。

其他代码都比较清晰简单，自己分析即可。

实现这个效果还是非常简单的，重点是平时的积累，以及各种参数的灵活搭配。想到实现方法，最终写代码是很快的事情。而且没有什么知识高点在里面。

CSS 之所以难，不是你不会，而是不不会去搭配。
 

其实，还是只还原了99%的设计效果，两条线一个在背景里面，一个在背景外面，想要把两条分割线都放到背景里面来，应该如何实现呢？可以思考一下。

安利一下 scss 。上面的 css 是编译出来的。其实用 scss 实现非常方便快捷，代码可读性也更高。

演示如下：

.m {
  margin: 100px;
}
.tab {
  width: 400px;margin: 0 auto;border: 1px solid $cdd;height: 40px;text-align: center;line-height: 40px;
  background: $cff;border-radius: 10px;overflow: hidden;
  li {
    float: left;width: 100px;position: relative;overflow: hidden;
    &:before,&:after,a {@include dz();}
    &:before,&:after {
      content: "";display: block;
    }
    &:not(:first-child) {
      &:after {
        background: $cdd;height: 20px;width: 1px;left: 0;top: 10px;position: absolute;
      }
    }
    a {
      display: block;position: relative;z-index: 2;color: $c00;font-size: 14px;
    }
    &:before {
      width: 0;height: 0;top: 50%;left: 50%;z-index: 1;position: absolute;
    }
    &:hover {
      a {color: $cff;}
      &:before {
        box-shadow: 0 0 0 100px $cyan;
      }
      & + li:after,&:after {
        height: 0;top: 20px;
      }
    }
  }
}

当然，这段代码中我用了颜色变量以及 mixin 混入代码。你不能直接使用。

总结

以上所述是小编给大家介绍的HTML5+CSS3 实现灵动的动画 TAB 切换效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

标签：
html5,css3,tab,切换
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网