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

代码语言：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 .6s ease-in-out
}

</style>
</head>

<body>

    <!-- ICONS --><svg id="svg-source" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute"><g id="shopping-cart" data-iconmelon="e-commerce icons:7c96e2dece0152dc594d66b260f79db0"><path d="M22.463,25.841c0.528,0,0.918-0.429,0.918-0.958v-6.786c0-0.529-0.39-0.958-0.918-0.958c-0.529,0-0.92,0.429-0.92,0.958
        v6.786C21.543,25.413,21.934,25.841,22.463,25.841z M18.156,25.841c0.529,0,0.919-0.429,0.919-0.958v-6.786
        c0-0.529-0.39-0.958-0.919-0.958s-0.919,0.429-0.919,0.958v6.786C17.237,25.413,17.627,25.841,18.156,25.841z M13.851,25.841
        c0.528,0,0.919-0.429,0.919-0.958v-6.786c0-0.529-0.391-0.958-0.919-0.958c-0.529,0-0.919,0.429-0.919,0.958v6.786
        C12.932,25.413,13.321,25.841,13.851,25.841z M29.426,8.511h-5.327l-2.731-4.396c-0.342-0.593-0.98-0.961-1.666-0.961
        c-0.336,0-0.668,0.089-0.959,0.258c-0.918,0.529-1.233,1.707-0.689,2.647l1.564,2.451h-7.976l1.58-2.475
        c0.529-0.917,0.214-2.095-0.704-2.624c-0.292-0.169-0.623-0.258-0.959-0.258c-0.686,0-1.323,0.368-1.655,0.943L7.161,8.511H2.574
        C1.155,8.511,0,9.667,0,11.086v1.47c0,1.274,0.934,2.525,2.152,2.728l1.931,11.042c0.03,1.394,1.173,2.519,2.573,2.519h18.605
        c1.401,0,2.545-1.125,2.574-2.52l1.921-11.032C31.019,15.128,32,13.862,32,12.556v-1.47C32,9.667,30.845,8.511,29.426,8.511z
         M26.615,26.167l-0.009,0.104c0,0.741-0.604,1.344-1.345,1.344H6.656c-0.741,0-1.344-0.603-1.344-1.344L3.407,15.327h25.096
        L26.615,26.167z M30.77,12.556c0,0.74-0.603,1.541-1.344,1.541H2.574c-0.741,0-1.344-0.8-1.344-1.541v-1.47
        c0-0.741,0.603-1.344,1.344-1.344h5.271l3.113-5.011c0.184-0.318,0.623-0.439,0.944-0.253c0.33,0.19,0.444,0.614,0.268,0.92
        L9.396,9.742h12.467l-2.76-4.32c-0.189-0.33-0.076-0.753,0.253-0.944c0.323-0.186,0.756-0.074,0.955,0.27l3.104,4.994h6.011
        c0.741,0,1.344,0.603,1.344,1.344V12.556z M9.545,25.841c0.528,0,0.918-0.429,0.918-0.958v-6.786c0-0.529-0.39-0.958-0.918-0.958
        c-0.529,0-0.919,0.429-0.919,0.958v6.786C8.626,25.413,9.016,25.841,9.545,25.841z"></path></g><g id="credit-card" data-iconmelon="e-commerce icons:c3144b166f93e0f6b73aee04a0a48397"><path d="M29.018,4.751H2.981C1.337,4.751,0,6.089,0,7.733v16.534c0,1.644,1.337,2.981,2.981,2.981h26.036
        c1.645,0,2.982-1.338,2.982-2.981V7.733C32,6.089,30.662,4.751,29.018,4.751z M30.638,24.267c0,0.893-0.727,1.62-1.621,1.62H2.981
        c-0.893,0-1.62-0.727-1.62-1.62V13.603h29.276V24.267z M30.638,10.236H1.362V7.733c0-0.894,0.727-1.62,1.62-1.62h26.036
        c0.894,0,1.621,0.727,1.621,1.62V10.236z M8.848,22.494H2.724v1.338h6.124V22.494z M19.043,22.494H9.548v1.........完整代码请登录后点击上方下载按钮下载查看