Beispiel für eine CSS3-Tab-Animation mit dynamischem Hintergrundwechseleffekt

<style type="text/css">
.slide-tabs { Anzeige:flex; Position:relativ; Rahmen:1px durchgezogen #3d3d3d; Rahmenradius:10px; Breite:150px; Überlauf:versteckt; Hintergrund:#1c1c1c; }
.slide-tabs * { z-index: 2; }
.slide-tabs Eingabe [Typ=Radio] { Anzeige: keine; }
.slide-tabs .tab { Anzeige:flex; Elemente ausrichten:zentriert; Inhalt ausrichten:zentriert; Rahmenradius:9px; Höhe:18px; Schriftgröße:12px; Farbe:#fff; Cursor:Zeiger; }
.slide-tabs .glider { display:flex; position:absolute; border-radius:9px; height:18px; background:#3da35a; z-index:1; transition:0.25s ease-out; } /*niedrigerer Z-Index */

.slide-tabs input[type=radio]:checked + label { color:#fff; } /*Ändern Sie die aktuelle Elementfarbe nach Bedarf*/
.slide-tabs Eingabe [Typ = Radio]:n-ter Typ (1):aktiviert ~ .glider { transform:translateX (0%); }
.slide-tabs Eingabe [Typ = Radio]:n-ter Typ (2):aktiviert ~ .glider { transform:translateX (100%); }
.slide-tabs Eingabe [Typ = Radio]:n-ter Typ (3):aktiviert ~ .glider { transform:translateX (200%); }

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

<div Klasse="slide-tabs tabs-3x">
    <input type="radio" id="radio-1" value="1" name="tabs" checked="aktiviert">
    <label class="tab" for="radio-1">Täglich</label>
    <Eingabetyp="Radio" ID="Radio-2" Wert="2" Name="Tabs">
    <label class="tab" for="radio-2">Woche</label>
    <Eingabetyp="radio" ID="radio-3" Wert="3" Name="Tabs">
    <label class="tab" for="radio-3">Monat</label>
    <span class="glider"></span>
</div>