How animation tab switch is implemented

This time to bring you the Animation tab switch How to achieve, the Animation tab switch implementation of the considerations are what, the following is the actual case, together to see.

The designer gave a tab switch. Although it is a small feature, front-end engineers still have a lot of details to pay attention to when implementing it. I wrote a demo for everyone's reference.

The final results are as follows:

I've extended the animation time to 3 seconds for the animated GIF to show the details.

Implementation ideas

The spacing vertical line, because is not the indomitable spirit, therefore cannot use the border. I'm going to implement it with pseudo-elements.

There are only 3 vertical bars, but there are 4 Li, this simple, can be used: not (: first-child) selector to select.

Switch background color change, because want to have small to large effect, therefore, can not directly use the background color implementation, I am also ready to use pseudo-element implementation.

If it is controlled by the size of the pseudo-element, the calculation will be more complex, so I want to use the Box-shadow shadow to implement.

Well, that's the way it is, so let's start writing the code below:

HTML Code

<p class="m">
<ul class="tab">
<li>< a href = "" > navigation 1</a></li>
<li>< a href = "" > navigation 2</a></li>
<li>< a href = "" > navigation 3</a></li>
<li>< a href = "" > navigation 4</a></li>
</ul>
</p>

The code structure above is already written, I think I can, do not make any adjustments. There's no cumbersome code.

CSS Code

.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; }

Code Analysis:

The animation implementation is very simple, as long as you use the Transition property.

You can control your own pseudo-elements and the pseudo-elements of the next sibling element, just use the + selector.

The other code is relatively clear and simple, their own analysis can be.

To achieve this effect is very simple, the focus is the usual accumulation, as well as various parameters of the flexible collocation. It is very fast to think of the implementation method and eventually write the code. And there is not much knowledge in it.

CSS is difficult, not you do not, but not to match.

In fact, still only restore the design effect of 99%, two lines one in the background, one in the background, want to put two separate lines into the background, how should be achieved? Can think for a moment.

Amway a bit scss. The CSS above is compiled. In fact, the implementation of SCSS is very convenient and fast, code readability is also higher.

The demo is as follows:

.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;
      }
    }
  }
}

Of course, in this code I used color variables and mixin to mix the code. You can't use it directly.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

CSS3 pointer-events use of the detailed

Focus-within the use of a detailed