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 相关文章推荐
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
Dec 25 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
跟老齐学Python之Python安装
2014/09/12 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
python中的数据结构比较
2019/05/13 Python
python获取Linux发行版名称
2019/08/30 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
商务英语专业毕业生自荐信
2013/11/05 职场文书
财务助理岗位职责
2013/11/10 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
运动会致辞稿50字
2014/02/04 职场文书
家长写给孩子的评语
2014/04/18 职场文书