CSS3 Tab动画实例之背景切换动态效果
这篇文章主要介绍了CSS3 Tab动画实例之背景切换动态效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
CSS 3 动画实例-Tab 背景切换的动态效果,具体代码如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <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.25 s 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 -3 x .tab, .slide-tabs.tabs -3 x .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动画实例之背景切换动态效果的文章就介绍到这了