UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

简约时尚的纯CSS3 Tabs选项卡特效

所属分类：媒体-Tabs

 37780  354  查看评论 (3)
分享到微信朋友圈
X
简约时尚的纯CSS3 Tabs选项卡特效 ie兼容10
 查看演示  立即下载

简要教程

这是一款使用纯CSS3制作的Tabs选项卡特效。该Tabs选项卡简约时尚，各个选项卡之间切换时使用了下划线跟随动画，整体效果非常不错。

使用方法

HTML结构

整个Tabs选项卡的HTML结构分为几个部分：使用<input>元素和一个无序列表来制作导航。

<input type="radio" id="tab1" name="tab-control" checked>
<input type="radio" id="tab2" name="tab-control">
<input type="radio" id="tab3" name="tab-control">  
<input type="radio" id="tab4" name="tab-control">
<ul>
  <li title="tab 1"><label for="tab1" role="button"><span>Tab 1</span></label></li>
  <li title="tab 2"><label for="tab2" role="button"><span>Tab 2</span></label></li>
  <li title="tab 3"><label for="tab3" role="button"><span>Tab 3</span></label></li>
  <li title="tab 4"><label for="tab4" role="button"><span>Tab 4</span></label></li>
</ul>

各个选项卡的内容包含在一个<div>元素中。

<div class="content">
  <section>
    <h2>Tab 1 content</h2>
  </section>
  <section>
    <h2>Tab 2 content</h2>
  </section>
  <section>
    <h2>Tab 3 content</h2>
  </section>
  <section>
    <h2>Tab 4 content</h2>
  </section>
</div>

用于制作下划线动画的线条使用一个<div>元素来制作。

<div class="slider"><div class="indicator"></div></div>

CSS样式

该Tabs选项卡的主要CSS样式如下：

.tabs {
	left: 50 % ; - webkit - transform: translateX( - 50 % );
	transform: translateX( - 50 % );
	position: relative;
	background: white;
	padding: 50px;
	padding - bottom: 80px;
	width: 70 % ;
	height: 250px;
	box - shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
	0 10px 10px rgba(0, 0, 0, 0.22);
	border - radius: 5px;
	min - width: 240px;
}.tabs input[name = "tab-control"] {
	display: none;
}.tabs.content section h2,
.tabs ul li label {
	font - weight: bold;
	font - size: 18px;
	color: #428BFF;
}.tabs ul {
	list - style - type: none;
	padding - left: 0;
	display: -webkit - box;
	display: -webkit - flex;
	display: -ms - flexbox;
	display: flex; - webkit - box - orient: horizontal; - webkit - box - direction: normal; - webkit - flex - direction: row; - ms - flex - direction: row;
	flex - direction: row;
	margin - bottom: 10px; - webkit - box - pack: justify; - webkit - justify - content: space - between; - ms - flex - pack: justify;
	justify - content: space - between; - webkit - box - align: end; - webkit - align - items: flex - end; - ms - flex - align: end;
	align - items: flex - end; - webkit - flex - wrap: wrap; - ms - flex - wrap: wrap;
	flex - wrap: wrap;
}.tabs ul li {
	box - sizing: border - box; - webkit - box - flex: 1; - webkit - flex: 1; - ms - flex: 1;
	flex: 1;
	width: 25 % ;
	padding: 0 10px;
	text - align: center;
}.tabs ul li label { - webkit - transition: all 0.3s ease - in-out;
	transition: all 0.3s ease - in-out;
	color: #929daf;
	padding: 5px auto;
	overflow: hidden;
	text - overflow: ellipsis;
	display: block;
	cursor: pointer; - webkit - transition: all 0.2s ease - in-out;
	transition: all 0.2s ease - in-out;
	white - space: nowrap; - webkit - touch - callout: none; - webkit - user - select: none; - moz - user - select: none; - ms - user - select: none;
	user - select: none;
}.tabs ul li label br {
	display: none;
}.tabs ul li label svg {
	fill: #929daf;
	height: 1.2em;
	vertical - align: bottom;
	margin - right: 0.2em; - webkit - transition: all 0.2s ease - in-out;
	transition: all 0.2s ease - in-out;
}.tabs ul li label: hover,
.tabs ul li label: focus,
.tabs ul li label: active {
	outline: 0;
	color: #bec5cf;
}.tabs ul li label: hover svg,
.tabs ul li label: focus svg,
.tabs ul li label: active svg {
	fill: #bec5cf;
}.tabs.slider {
	position: relative;
	width: 25 % ; - webkit - transition: all 0.33s cubic - bezier(0.38, 0.8, 0.32, 1.07);
	transition: all 0.33s cubic - bezier(0.38, 0.8, 0.32, 1.07);
}.tabs.slider.indicator {
	position: relative;
	width: 50px;
	max - width: 100 % ;
	margin: 0 auto;
	height: 4px;
	background: #428BFF;
	border - radius: 1px;
}.tabs.content {
	margin - top: 30px;
}.tabs.content section {
	display: none; - webkit - animation - name: content;
	animation - name: content; - webkit - animation - direction: normal;
	animation - direction: normal; - webkit - animation - duration: 0.3s;
	animation - duration: 0.3s; - webkit - animation - timing -
	function: ease - in-out;
	animation - timing -
	function: ease - in-out; - webkit - animation - iteration - count: 1;
	animation - iteration - count: 1;
	line - height: 1.4;
}.tabs.content section h2 {
	color: #428BFF;
	display: none;
}.tabs.content section h2: :after {
	content: "";
	position: relative;
	display: block;
	width: 30px;
	height: 3px;
	background: #428BFF;
	margin - top: 5px;
	left: 1px;
}.tabs input[name = "tab-control"] : nth - of - type(1) : checked~ul > li: nth - child(1) > label {
	cursor: default;
	color:
	#428BFF;
}.tabs input[name = "tab-control"] : nth - of - type(1) : checked~ul > li: nth - child(1) > label svg {
	fill: #428BFF;
}@media(max - width: 600px) {.tabs input[name = "tab-control"] : nth - of - type(1) : checked~ul > li: nth - child(1) > label {
		background: rgba(0, 0, 0, 0.08);
	}
}.tabs input[name = "tab-control"] : nth - of - type(1) : checked~.slider { - webkit - transform: translateX(0 % );
	transform: translateX(0 % );
}.tabs input[name = "tab-control"] : nth - of - type(1) : checked~.content > section: nth - child(1) {
	display: block;
}.tabs input[name = "tab-control"] : nth - of - type(2) : checked~ul > li: nth - child(2) > label {
	cursor: default;
	color:
	#428BFF;
}.tabs input[name = "tab-control"] : nth - of - type(2) : checked~ul > li: nth - child(2) > label svg {
	fill: #428BFF;
}@media(max - width: 600px) {.tabs input[name = "tab-control"] : nth - of - type(2) : checked~ul > li: nth - child(2) > label {
		background: rgba(0, 0, 0, 0.08);
	}
}.tabs input[name = "tab-control"] : nth - of - type(2) : checked~.slider { - webkit - transform: translateX(100 % );
	transform: translateX(100 % );
}.tabs input[name = "tab-control"] : nth - of - type(2) : checked~.content > section: nth - child(2) {
	display: block;
}.tabs input[name = "tab-control"] : nth - of - type(3) : checked~ul > li: nth - child(3) > label {
	cursor: default;
	color:
	#428BFF;
}.tabs input[name = "tab-control"] : nth - of - type(3) : checked~ul > li: nth - child(3) > label svg {
	fill: #428BFF;
}@media(max - width: 600px) {.tabs input[name = "tab-control"] : nth - of - type(3) : checked~ul > li: nth - child(3) > label {
		background: rgba(0, 0, 0, 0.08);
	}
}.tabs input[name = "tab-control"] : nth - of - type(3) : checked~.slider { - webkit - transform: translateX(200 % );
	transform: translateX(200 % );
}.tabs input[name = "tab-control"] : nth - of - type(3) : checked~.content > section: nth - child(3) {
	display: block;
}.tabs input[name = "tab-control"] : nth - of - type(4) : checked~ul > li: nth - child(4) > label {
	cursor: default;
	color:
	#428BFF;
}.tabs input[name = "tab-control"] : nth - of - type(4) : checked~ul > li: nth - child(4) > label svg {
	fill: #428BFF;
}@media(max - width: 600px) {.tabs input[name = "tab-control"] : nth - of - type(4) : checked~ul > li: nth - child(4) > label {
		background: rgba(0, 0, 0, 0.08);
	}
}.tabs input[name = "tab-control"] : nth - of - type(4) : checked~.slider { - webkit - transform: translateX(300 % );
	transform: translateX(300 % );
}.tabs input[name = "tab-control"] : nth - of - type(4) : checked~.content > section: nth - child(4) {
	display: block;
}@ - webkit - keyframes content {
	from {
		opacity: 0; - webkit - transform: translateY(5 % );
		transform: translateY(5 % );
	}
	to {
		opacity: 1; - webkit - transform: translateY(0 % );
		transform: translateY(0 % );
	}
}@keyframes content {
	from {
		opacity: 0; - webkit - transform: translateY(5 % );
		transform: translateY(5 % );
	}
	to {
		opacity: 1; - webkit - transform: translateY(0 % );
		transform: translateY(0 % );
	}
}@media(max - width: 1000px) {.tabs ul li label {
		white - space: initial;
	}.tabs ul li label br {
		display: initial;
	}.tabs ul li label svg {
		height: 1.5em;
	}
}@media(max - width: 600px) {.tabs ul li label {
		padding: 5px;
		border - radius: 5px;
	}.tabs ul li label span {
		display: none;
	}.tabs.slider {
		display: none;
	}.tabs.content {
		margin - top: 20px;
	}.tabs.content section h2 {
		display: block;
	}
}


相关插件-Tabs
查看更多

table切换

 这是一个简单的JQ切换效果，使用简单，而且可以重复使用。兼容IE6\IE7\IE8所有,以及firefox,chrome,Safari
  Tabs
 63309  413

移动可滑动切换tab选项卡

 移动端头部任意多个滑动切换
  Tabs
 92182  534

jQuery产品切换tab选项卡

 特别好用的tab选项卡，可以轮播多张图片,无多余代码注释全
  Tabs
 38264  362

基本jquery的菜单标签页选项插件(原创)

 很容易将此插件集成到你的平台当中
  Tabs
 38207  404

讨论这个项目（3）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    qzuser 0
    2018/4/17 23:30:39
    css3都这么?了么，居然还能做Tabs了 回复
    黑胡椒 0
    2017/3/28 11:17:58

    很强大・・・・・・・・・・・・・就是看不懂・・・・・・・・・・

    回复
    123 0
    2016/12/23 10:12:16

    为什么我自己外加一个居左向下排列的导航栏文字和上面的四个选项都靠右了   而且下划线不动位置   改不了

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复