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

CSS 3 アニメーションの例 - タブの背景切り替えの動的効果、具体的なコードは次のとおりです。

<スタイル タイプ="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>

コードは上記の通りです。「日、週、月」をクリックすると、現在の項目が選択されるほか、下の緑色のブロックも移動します。以下のように表示されます。

頭がいい

ラジオを使用すると、JavaScript で現在の項目を設定する必要がなくなります。

同時に、ラジオボタンは非表示になり、ラベルの for 属性によってラベルがラジオボタンに関連付けられます。ラベルをクリックすると、ラジオボタンをクリックするのと同じになります。

賢い2

遷移は transform:translateX と組み合わされます。ここで、translateX は x 方向の変位を指します。

これで、CSS3 タブアニメーションの例による背景切り替えの動的効果に関するこの記事は終了です。CSS3 タブ背景切り替え効果に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JavaScript による Web ページカルーセルの超詳細な実装

>>: HTTPプロトコルにおけるステータスコードの意味