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

发布时间:2022-04-13 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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; }
.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; } /*按需修改当前项颜色*/
.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>

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

巧妙一

使用 radio,这使得不需要 JavaScript 去设置当前项。

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

巧妙二

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的CSS3 Tab动画实例之背景切换动态效果全部内容,希望文章能够帮你解决CSS3 Tab动画实例之背景切换动态效果所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:css3