欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3 Tab動畫實例之背景切換動態(tài)效果

  發(fā)布時間：2021-08-20 15:37:44   作者：千一網(wǎng)絡(luò)   我要評論
這篇文章主要介紹了CSS3 Tab動畫實例之背景切換動態(tài)效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

CSS 3 動畫實例－Tab 背景切換的動態(tài)效果，具體代碼如下所示：

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

.slide-tabs input[type=radio]:checked + label { color:#fff; } /*按需修改當(dāng)前項顏色*/
.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">日</label>
    <input type="radio" id="radio-2" value="2" name="tabs">
    <label class="tab" for="radio-2">周</label>
    <input type="radio" id="radio-3" value="3" name="tabs">
    <label class="tab" for="radio-3">月</label>
    <span class="glider"></span>
</div>

代碼如上，當(dāng)點擊“日、周、月”時，除了選中當(dāng)前項，還會有下面的綠色塊移動的效果。如下圖：

巧妙一

使用 radio，這使得不需要 JavaScript 去設(shè)置當(dāng)前項。

同時隱藏了 radio，而 label 的 for 屬性使 label 與 radio 關(guān)聯(lián)起來了，點了 label 相當(dāng)于點了 radio。

巧妙二

transition 與 transform:translateX 的配合，其中 translateX 指 x 方向的位移。

到此這篇關(guān)于CSS3 Tab動畫實例之背景切換動態(tài)效果的文章就介紹到這了,更多相關(guān)css3 tab背景切換效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論