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

CSS

语言：

CSSSCSS

确定

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;

}