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


Posted in HTML / CSS onAugust 23, 2021

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>

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

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

巧妙一

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

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

巧妙二

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

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

 
HTML / CSS 相关文章推荐
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
如何使用 resize 实现图片切换预览功能
Aug 23 #HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 #HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 #HTML / CSS
css3中transform属性实现的4种功能
Aug 07 #HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 #HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 #HTML / CSS
You might like
php实现给一张图片加上水印效果
2016/01/02 PHP
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
Vue动态实现评分效果
2017/05/24 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
回顾Javascript React基础
2019/06/15 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
Python实现处理管道的方法
2015/06/04 Python
开始着手第一个Django项目
2015/07/15 Python
Python数据结构之图的应用示例
2018/05/11 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
python excel多行合并的方法
2020/12/09 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
应聘教师推荐信
2013/10/31 职场文书
学校运动会开幕演讲稿
2014/01/04 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
2014教师年度工作总结
2014/11/10 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书