HTML5+CSS3 完成灵动的动漫 TAB 切换实际效果(DEMO)

日期:2021-03-02 类型:科技新闻 

关键词:自助建站免费建站平台,网站的建设服务,自助建站平台,如何自己建网站,怎么建设网站

设计方案师给了1个 tab 切换的实际效果图。尽管是1个很小的作用,可是前端开发工程项目师在完成的情况下還是有许多细节必须留意。我写了1个 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 特性便可。

操纵自身的伪元素和下1个同级元素的伪元素,只必须应用 + 挑选器便可。

别的编码都较为清楚简易,自身剖析便可。

完成这个实际效果還是十分简易的,关键是平常的累积,和各种各样主要参数的灵便配搭。想起完成方式,最后写编码是很快的事儿。并且沒有甚么专业知识高点在里边。

CSS 之因此难,并不是你不容易,而是不不容易去配搭。
 

实际上,還是只复原了99%的设计方案实际效果,两条线1个在情况里边,1个在情况外面,要想把两条切分线都放到情况里边来,应当怎样完成呢?能够思索1下。

安利1下 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 切换实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!