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 ..........完整代码请登录后点击上方下载按钮下载查看