CSS3 Tab动画实例之背景切换动态效果_css3_CSS_网页制作

来源:脚本之家  责任编辑:小易  

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切换的三种方法介绍
  • 利用纯css3实现tab选项卡切换示例代码
  • 一款纯css3实现的tab选项卡的实列教程
  • css3华丽的tab菜单当鼠标滑过时会出现展开动画
  • jQuery浏览器CSS3特写兼容实例
  • html5 css3网站实例教程
  • 求css3兼容ie6-ie8的实例文件
  • 用贝塞尔曲线能顺序执行css3的动画么
  • css3过渡动画transition可以只写时间吗
  • 如何触发css3过渡动画
  • CSS3 animation动画,循环间的延时执行该怎么弄
  • CSS3 animation动画,循环间的延时执行该怎么弄
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss3css3tabcss实现导航条tab切换的三种方法介绍利用纯css3实现tab选项卡切换示例代码css3华丽的tab菜单当鼠标滑过时会出现展开动画css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css3的transform中scale缩放详解纯css绘制漂亮的圆形图案效果css3通过scale()、rotate()实现放大、旋转纯css实现聊天框小尖角、气泡效果css3 icon font完全指南(css3 font 会取代icon图标)css3实现div圆角效果完整代码 css3实现背景颜色渐变让图片不再是唯一的实现方式8款精美的css3表单设计(登录表单/下拉选择/按钮附演示css3 media queries(响应式布局可以让你定制不同的分使用css3背景渐变中的透明度来设置不同颜色的背景渐变css3 tab动画实例之背景切换动态效果css3中transform属性实现的4种功能详解css3.0(cascading style sheet) 层叠级联样式表纯css3实现div按照顺序出入效果css3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局css3实现的侧滑菜单css3实现的3d隧道效果用css3画一个爱心css3 实现文字闪烁效果的三种方式示例代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved