HTML5顶部横向标签栏滑动切换动画

Toggle Tabs Animation，水平标签栏

html5, tabs

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3593
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: rgba(52, 95, 144, 0.07);
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.66667;
}
.container {
    width: 75%;
    margin: 3rem auto;
}
h2 {
    color: #345F90;
    font-size: 24px;
    line-height: 1.25;
    font-family: "Roboto Slab", serif;
    margin-top: 20px;
    margin-bottom: 20px;
}
.tab-slider--nav {
    width: 100%;
    float: left;
    margin-bottom: 20px;
}
.tab-slider--tabs {
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    border-radius: 35px;
    overflow: hidden;
    background: #fff;
    height: 35px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.tab-slider--tabs:after {
    content: "";
    width: 50%;
    background: #345F90;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    border-radius: 35px;
}
.tab-slider--tabs.slide:after {
    left: 50%;
}
.tab-slider--trigger {
    font-size: 12px;
    line-height: 1;
    font-weight: bold;
    color: #345F90;
    text-transform: uppercase;
    text-align: center;
    padding: 11px 20px;
    position: relative;
    z-index: 2;
    cursor: pointer;
    display: inline-block;
    -webkit-transition: color 250ms ease-in-out;
    transition: color 250ms ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.tab-slider--trigger.active {
    color: #fff;
}
.tab-slider--body {
    margin-bottom: 20px;
}

HTML

<div class="container">
    <div class="tab-slider--nav">
        <ul class="tab-slider--tabs">
            <li class="tab-slider--trigger active" rel="tab1">Tab 1</li>
            <li class="tab-slider--trigger" rel="tab2">Tab 2</li>
        </ul>
    </div>
    <div class="tab-slider--container">
        <div id="tab1" class="tab-slider--body">
            <h2>First Tab</h2>
            <p>Toggle switch style tab navigation. Currently only works with two tabs.</p>
            <p>Donec ullamcorper nulla non metus auctor fringilla. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla
                vitae elit libero, a pharetra augue.</p>
        </div>
        <div id="tab2" class="tab-slider--body">
            <h2>Second Tab</h2>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Aenean eu
                leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </div>
    </div>
</div>

Toggle Tabs Animation，水平标签栏

html5, tabs

编辑器支持Emmet

快捷键

Toggle Tabs Animation，水平标签栏

html5, tabs

HTML5横向可扩展导航条切换动画

HTML5/Canvas可以切换日夜模式的挂钟动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：