jquery+svg实现图文介绍tab选项卡圆滑切换效果代码-html代码-BFW代码库

jquery+svg实现图文介绍tab选项卡圆滑切换效果代码

代码语言：html

所属分类：选项卡

代码描述：jquery+svg实现图文介绍tab选项卡圆滑切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
html,body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	background-color:#eee;
	font-family:"Raleway"
}
ul,li {
	margin:0;
	padding:0;
	list-style:none
}
.icon {
	position:relative;
	width:32px;
	height:32px;
	display:block;
	fill:rgba(51,51,51,0.5);
	margin-right:20px;
	transition:all .2s ease-out
}
.icon.active {
	fill:#E74C3C
}
.icon.big {
	width:64px;
	height:64px;
	fill:rgba(51,51,51,0.5)
}
#wrapper {
	width:900px;
	height:400px;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	background-color:#fff;
	box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
	display:flex;
	align-items:center;
	justify-content:left;
	overflow:hidden
}
#left-side {
	height:70%;
	width:25%;
	display:flex;
	align-items:center;
	justify-content:center
}
#left-side ul li {
	padding-top:10px;
	padding-bottom:10px;
	display:flex;
	line-height:34px;
	color:rgba(51,51,51,0.5);
	font-weight:500;
	cursor:pointer;
	transition:all .2s ease-out
}
#left-side ul li:hover {
	color:#333;
	transition:all .2s ease-out
}
#left-side ul li:hover>.icon {
	fill:#333
}
#left-side ul li.active {
	color:#333
}
#left-side ul li.active:hover>.icon {
	fill:#E74C3C
}
#border {
	height:288px;
	width:1px;
	background-color:rgba(51,51,51,0.2)
}
#border #line.one {
	width:5px;
	height:54px;
	background-color:#E74C3C;
	margin-left:-2px;
	margin-top:35px;
	transition:all .4s ease-in-out
}
#border #line.two {
	width:5px;
	height:54px;
	background-color:#E74C3C;
	margin-left:-2px;
	margin-top:89px;
	transition:all .4s ease-in-out
}
#border #line.three {
	width:5px;
	height:54px;
	background-color:#E74C3C;
	margin-left:-2px;
	margin-top:143px;
	transition:all .4s ease-in-out
}
#border #line.four {
	width:5px;
	height:54px;
	background-color:#E74C3C;
	margin-left:-2px;
	margin-top:197px;
	transition:all .4s ease-in-out
}
#right-side {
	height:300px;
	width:75%;
	overflow:hidden
}
#right-side #first,#right-side #second,#right-side #third,#right-side #fourth {
	position:absolute;
	height:300px;
	width:75%;
	transition:all .6s ease-in-out;
	margin-top:-350px;
	opacity:0;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column
}
#right-side #first h1,#right-side #second h1,#right-side #third h1,#right-side #fourth h1 {
	font-weight:800;
	color:#333
}
#right-side #first p,#right-side #second p,#right-side #third p,#right-side #fourth p {
	color:#333;
	font-weight:500;
	padding-left:30px;
	padding-right:30px
}
#right-side #first.active,#right-side #second.active,#right-side #third.active,#right-side #fourth.active {
	margin-top:0;
	opacity:1;
	transition:all ..........完整代码请登录后点击上方下载按钮下载查看