Background switching dynamic effect of CSS3 tab animation instance

Time:2022-5-6

CSS 3 animation example – dynamic effect of tab background switching. The specific code is as follows:

<style type="text/css">
.slide-tabs { display:flex; position:relative; border:1px solid #3d3d3d; border-radius:10px; width:150px; overflow:hidden; background:#1c1c1c; }
.slide-tabs * { z-index:2; }
.slide-tabs input[type=radio] { display:none; }
.slide-tabs .tab { display:flex; align-items:center; justify-content:center; border-radius:9px; height:18px; font-size:12px; color:#fff; cursor:pointer; }
.slide-tabs . glider { display:flex; position:absolute; border-radius:9px; height:18px; background:#3da35a; z-index:1; transition:0.25s ease-out; } /* Reduce Z-index*/

.slide-tabs input[type=radio]:checked + label { color:#fff; } /* Modify the current item color as needed*/
.slide-tabs input[type=radio]:nth-of-type(1):checked ~ .glider { transform:translateX(0%); }
.slide-tabs input[type=radio]:nth-of-type(2):checked ~ .glider { transform:translateX(100%); }
.slide-tabs input[type=radio]:nth-of-type(3):checked ~ .glider { transform:translateX(200%); }

.slide-tabs.tabs-3x .tab,
.slide-tabs.tabs-3x .glider { width:50px; }
</style>

<div class="slide-tabs tabs-3x">
    <input type="radio" id="radio-1" value="1" name="tabs" checked="checked">
    < label class = "tab" for = "radio-1" > day < / label >
    <input type="radio" id="radio-2" value="2" name="tabs">
    < label class = "tab" for = "radio-2" > week < / label >
    <input type="radio" id="radio-3" value="3" name="tabs">
    < label class = "tab" for = "radio-3" > month < / label >
    <span class="glider"></span>
</div>

The code is as above. When you click “day, week and month”, in addition to selecting the current item, the following green block will move. As shown below:

Ingenious one

Use radio, which eliminates the need for JavaScript to set the current item.

At the same time, radio is hidden, and the for attribute of label associates label with radio. Clicking label is equivalent to clicking radio.

Ingenious two

The combination of transition and transform: translatex, where translatex refers to the displacement in the X direction.

This is the end of this article about the background switching dynamic effect of CSS3 tab animation examples. For more information about the background switching effect of CSS3 tab, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!