大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

HTML5+CSS3怎么实现灵动的动画TAB切换效果-创新互联

这篇文章将为大家详细讲解有关HTML5+CSS3怎么实现灵动的动画TAB切换效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

我们提供的服务有:成都网站制作、网站设计、微信公众号开发、网站优化、网站认证、京山ssl等。为成百上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的京山网站制作公司

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

最终实现效果如下:

HTML5+CSS3怎么实现灵动的动画TAB切换效果

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

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

实现思路

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

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

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

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

好,大体就是如此了,下面开始写代码,如下:

HTML 代码

  
    
      
  • 导航1
  •       
  • 导航2
  •       
  • 导航3
  •       
  • 导航4
  •        

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

    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切换效果-创新互联
    浏览路径:http://dzwzjz.com/article/diceos.html

    其他资讯

    在线咨询
    服务热线
    服务热线:028-86922220
    TOP