CSS3 Tab动画实例之背景切换动态效果
发布时间：2021-08-20 15:37:44 作者：千一网络 
我要评论
我要评论这篇文章主要介绍了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背景切换效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了CSS实现导航条Tab切换的三种方法，包括布局、hover、label，具有一定的参考价值，有兴趣的可以了解一下。2017-01-13- 这篇文章给大家介绍了如何利用纯CSS3实现tab切换，实现的效果很简单但很使用，而且代码也不复杂，有需要的朋友们可以参考借鉴。2016-09-21
- css3怎么做tab选项卡？下面费大家分享一款纯css3实现的tab选项卡的实列教程，单击左侧的选项的时候，右侧内容以动画的形式展示。下文有具体代码，想学的朋友可以进来参考一2014-12-11
这款Tab菜单的菜单项是一个个小图标，鼠标滑过时，菜单项展示对应文字，并出现展开的动画2014-05-04
最新评论