html左侧导航栏椭圆风格,HTML5 果冻风格的导航菜单栏

CSS

语言：

CSSSCSS

确定

body {

background: #423852;

overflow: hidden;

}

.container {

position: absolute;

width: 348px;

margin-left: -174px;

top: 42px;

left: 50%;

border-radius: 0 0 4px 4px;

overflow: hidden;

z-index: 1;

}

.container .nav,

.container .nav__item {

padding: 0;

margin: 0;

list-style: none;

text-align: center;

}

.container .nav {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

background: #5c4d6f;

z-index: 1;

}

.container .nav__item {

-webkit-box-flex: 1;

-webkit-flex-grow: 1;

-ms-flex-positive: 1;

flex-grow: 1;

width: 60px;

padding: 1em 0;

color: rgba(255, 255, 255, 0.8);

z-index: 3;

cursor: pointer;

-webkit-transition: color 0.4s ease 0.4s;

transition: color 0.4s ease 0.4s;

}

.container .nav__item.selected {

color: black;

}

.jelly {

background-image: -webkit-linear-gradient(left, #3498db 0%, #3498db 20%, #1abc9c 20%, #1abc9c 40%, #e75c56 40%, #e75c56 60%, #fabb74 60%, #fabb74 80%, #de6596 80%, #de6596 100%);

background-image: linear-gradient(to right, #3498db 0%, #3498db 20%, #1abc9c 20%, #1abc9c 40%, #e75c56 40%, #e75c56 60%, #fabb74 60%, #fabb74 80%, #de6596 80%, #de6596 100%);

background-attachment: fixed;

background-position: 50%;

background-size: 348px;

height: 50px;

top: 0;

position: absolute;

-webkit-transform: translate3d(0px, 0px, 1px);

transform: translate3d(0px, 0px, 1px);

-webkit-transition: background 0.6s cubic-bezier(0.94, 0.12, 0.29, 0.92), left 0.2s cubic-bezier(0.24, 0.84, 0.53, 1), right 0.2s cubic-bezier(0.24, 0.84, 0.53, 1);

transition: background 0.6s cubic-bezier(0.94, 0.12, 0.29, 0.92), left 0.2s cubic-bezier(0.24, 0.84, 0.53, 1), right 0.2s cubic-bezier(0.24, 0.84, 0.53, 1);

}

.jelly.left {

-webkit-transition: background 0.6s cubic-bezier(0.94, 0.12, 0.29, 0.92), left 0.8s cubic-bezier(0.94, 0.12, 0.29, 0.92), right 0.3s cubic-bezier(0.24, 0.84, 0.53, 1) 0.5s;

transition: background 0.6s cubic-bezier(0.94, 0.12, 0.29, 0.92), left 0.8s cubic-bezier(0.94, 0.12, 0.29, 0.92), right 0.3s cubic-bezier(0.24, 0.84, 0.53, 1) 0.5s;

}

.jelly.right {

-webkit-transition: background 0.6s cubic-bezier(0.94, 0.12, 0.29, 0.92), right 0.8s cubic-bezier(0.94, 0.12, 0.29, 0.92), left 0.3s cubic-bezier(0.24, 0.84, 0.53, 1) 0.5s;

transition: background 0.6s cubic-bezier(0.94, 0.12, 0.29, 0.92), right 0.8s cubic-bezier(0.94, 0.12, 0.29, 0.92), left 0.3s cubic-bezier(0.24, 0.84, 0.53, 1) 0.5s;

}

.iphone {

background: url(http://2.bp.blogspot.com/-6hlrTw0hxdQ/VA9aSOz9Y1I/AAAAAAAAkXE/BekM0IzyPrU/s1600/Imagenes%2Biphone%2B6%2Bpng%2B3.png);

background-position: 1px bottom;

background-size: cover;

width: 801px;

height: 200px;

position: absolute;

left: 50%;

margin-left: -400px;

}

label {

color: white;

position: absolute;

left: 50%;

top: 200px;

margin-left: -200px;

width: 400px;

text-align: center;

line-height: 40px;

vertical-align: middle;

}

label input {

position: relative;

top: 2px;

margin: 5px;

}