CSS3 タブアニメーションの例 背景切り替えの動的効果

<スタイル タイプ="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 入力[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 easy-out; } /*z-indexを下げる*/

.slide-tabs input[type=radio]:checked + label { color:#fff; } /*必要に応じて現在のアイテムの色を変更します*/
.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 { 幅:50px; }
</スタイル>

<div class="スライドタブタブ-3x">
    <input type="radio" id="radio-1" value="1" name="tabs" checked="チェック済み">
    <label class="tab" for="radio-1">デイリー</label>
    <input type="radio" id="radio-2" value="2" name="タブ">
    <label class="tab" for="radio-2">週</label>
    <input type="radio" id="radio-3" value="3" name="タブ">
    <label class="tab" for="radio-3">月</label>
    <span class="グライダー"></span>
</div>