HTML5和CSS3 实现灵动画的切换结果

本文给大家分享一个demo基于HTML5+CSS3 实现灵动的动画 TAB 切换结果，很好，具有参照 借鉴价值，需要的伴侣参照 下吧

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

终究实现结果如下：

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

实现思绪

间隔竖线，由于不是顶天立地的，所以不克不及用边框。我预备用伪元素实现。

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

切换的背景色彩转变，由于想要有从小到大的结果，因此，也不克不及直接使用背景色彩实现，我也预备用伪元素实现。

假如用伪元素的大小来操纵，运算会比力复杂，因此，我想用 box-shadow 暗影来实现。

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

HTML 代码

  <p 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>
  </p>

上面的代码构造是此前已经写好的，我看可以，就不做任何调整了。没有什么负担的代码。

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 混入代码。你不克不及直接使用。

以上就是本文的全部内容，但愿对大家的学习有所帮忙，更多相关内容请关注PHP中文网！

相关引荐：

怎样利用CSS3的线性渐变linear-gradient制作边框

CSS怎样潜藏滚动条

以上就是HTML5和CSS3 实现灵动画的切换结果的具体内容，更多请关注百分百源码网其它相关文章！