1. ホーム
  2. Web制作
  3. CSS

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

2022-01-21 13:21:44

CSS 3 アニメーション例 - タブの背景のトグル動的効果、コードは以下のとおりです。

<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; } /* lower z-index */

.slide-tabs input[type=radio]:checked + label { color:#fff; } /* modify current item color on demand */
.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>

コードは上記の通りで、"Day, Week, Month"をクリックすると、現在の項目を選択するだけでなく、以下の緑色のブロックが移動する効果もあります。以下はそのイメージです。

クレバーワン

ラジオを使用することで、現在の項目を設定するためのJavaScriptが不要になります。

また、ラジオは非表示になり、ラベルのfor属性はラベルをラジオに関連付けますので、ラベルをタップするとラジオをタップしたのと同じことになります。

賢い2人

トランジションはtransform:translateXで動作し、translateXはx方向の変位を意味する。

今回はCSS3タブアニメーションの背景切り替え動的効果の例を紹介しましたが、より関連するCSS3タブ背景切り替え効果コンテンツはスクリプトハウスの過去記事を検索するか、以下の関連記事を引き続き閲覧してください、今後ともスクリプトハウスをよろしくお願いします!(`・ω・´)