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

所属分类:媒体-Tabs

 4889  33  查看评论 (2)
简约时尚的纯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

js仿660网站宽屏图片选项卡切换代码

js仿660网站宽屏图片选项卡切换代码
  Tabs
 5425  28

jQuery的Tab插件 Yetii

Yetii 是一个 jQuery 用来实现 Tab 窗体的插件,目前尚不支持 Ajax 方式获取内容
  Tabs
 17535  29

Jquery css3 彩色动画Tabs选项卡切换特效

彩色动画Tabs,独特风格,动画特效平滑
  Tabs
 5006  41

可打开可关闭的选项卡,单纯无污染,改改样式就能用

可打开可关闭的选项卡,单纯无污染,改改样式就能用
  Tabs
 8302  26

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币

    黑胡椒 0
    2017/3/28 11:17:58

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

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

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

    回复
取消回复