CSS3 Tab动画实例之背景切换动态效果

css 3 动画实例－tab 背景切换的动态效果，具体代码如下所示：

<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; }.sl陈韪ide-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 ea-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%); }.slid传热方式e-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" va戊戌变法的目的lue="2" name="tabs">    <label cl日出曹禺ass="tab" for="radio-2">周</label>    <input type="radio" id="radio-3" value="3" name="tabs">    <label class="tab" for="radio-3">月</labelyif魔术揭秘 破解>    <span class="glider"></span></div>

代码如上，当点击“日、周、月”时，除了选中当前项，还会有下面的绿色块移动的效果。如下图：

巧妙一

使用 radio，这使得不需要 javascript 去设置当前项。

同时隐藏了 radio，而 label 的 for 属性使 label 与 radio 关联起来了，点了 label 相当于点了 radio。

巧妙二

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

到此这篇关于css3 tab动画实例之背景切换动态效果的文章就介绍到这了,更多相关css3 tab背景切换效果内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！