一段非常漂亮的纯CSS3实现的tab选项卡特效，非常的炫酷
导读：今天给大家带来一款纯css3实现的tab选项卡。单击左侧的选项的时候，右侧内容以动画的形式展示。效果图如下： 实现的代码。 html代码： 复制代码 代码如下: Night Tabs Typography...
今天给大家带来一款纯css3实现的tab选项卡。单击左侧的选项的时候，右侧内容以动画的形式展示。效果图如下：
实现的代码。
html代码：
复制代码 代码如下:css3代码：
复制代码 代码如下:/*------------------------------------*/
#RESET
/*------------------------------------*/
.night-tabs a,
.night-tabs div,
.night-tabs em,
.night-tabs img,
.night-tabs ul,
.night-tabs label,
.night-tabs li,
.night-tabs ol,
.night-tabs p,
.night-tabs span,
.night-tabs ul {
/* -> > > Structure Structure Structure Typography CSS3 Prevents double-click selection. > Spacing for content. Intensity of tab effects. .content2:checked~ul> .content2,
.night-tabs> .content3:checked~ul> .content3,
.night-tabs> .content4:checked~ul> .content4 {
/* Structure */
opacity: 1;
visibility: visible;
/* CSS3 */
-webkit-transform: none;
-ms-transform: none;
transform: none
}
/*------------------------------------*/
#SLIDE EFFECTS
/*------------------------------------*/
/* -> > > Slide Up > Slide Down > Slide Left > Slide Right > Slide Up + Left > Slide Up + Right > Slide Down + Left > Slide Down + Right > Rotate ul > li,
.night-tabs-animation-rotate.night-tabs.night-tabs-position-vright > ul > li {
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg)
}
/* -> > > Scale > > Flip li {
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg)
}
.night-tabs-animation-flip.night-tabs-position-vright > .night-tabs-content > li {
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg)
}
/**
* CONTENTS - layouts.css
*
* HORIZONTAL POSITIONS
* Basic horizontal positions: top, left, right, and justify.
*
* VERTICAL POSITIONS
* Basic vertical positions, vertical left and vertical right.
*
*/
/*------------------------------------*/
#HORIZONTAL POSITIONS
/*------------------------------------*/
/* -> > > Left, Center, Right Justified label { width: 33.33%}
.night-tabs-position-justify4 > label { width: 25%}
/*------------------------------------*/
#VERTICAL POSITIONS
/*------------------------------------*/
/* -> > > General Styles label,
.night-tabs-position-vright > label {
clear: left;
display: block;
float: left;
margin-right: 0;
width: 25%
}
/* -> > > Vertical Left > Vertical Right li {
-webkit-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
transform-origin: 100% 0%
}
/**
* CONTENTS - typography.css
*
* BASIC TYPOGRAPHY
* Styles for headings,paragraphs, and links.
*
* EXTENDED TYPOGRAPHY
* Styling for images, unordered and ordered lists, and utility classes.
*
* GRID SYSTEM
* Basic 12 fluid column grid system with offset support.
*
*/
/*------------------------------------*/
#BASIC TYPOGRAPHY
/*------------------------------------*/
/* -> > > Headings Paragraphs Links FontAwesome Images Lists Utility Micro-Clearfix Basic Structure Grid System Config Default (Gray/Grey) Blue Red Green Purple Orange Yellow Pink Brown Teal Turquoise .night-tabs-content > li {
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%
}
.night-tabs.night-tabs-animation-flip > ul > li {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg)
}
}
body {
background: #111;
margin-top: 2em
}
总结：
这里主要使用表单的单选按钮来实现这个TAB显示和隐藏，首页tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显示内容。具体请看下面代码。
关于兼容性，因为是用CSS3来制作的，所以如果不支持CSS3的浏览将会出现不兼容的情况。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 一段非常漂亮的纯CSS3实现的tab选项卡特效，非常的炫酷
本文地址： https://pptw.com/jishu/666730.html