jQuery/CSS3 3D Tab菜单选项卡插件DEMO演示

1、新建html文档。

3、书写css代码。body { overflow-y: scroll; }.wrap { marin: 0 auto; }ul.tabs { width: 390px; height: 80px; margin: 0 auto; list-style: none; overflow: hidden; padding: 0; }ul.tabs li { float: left; width: 130px; }ul.tabs li a { position: relative; display: block; height: 30px; margin-top: 40px; padding: 10px 0 0 0; font-family: 'Open Sans', sans-serif; font-size: 18px; text-align: center; text-decoration: none; color: #ffffff; background: #6edeef; -webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4); -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4); box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4); border: 0px solid #000000; -webkit-transition: padding 0.2s ease, margin 0.2s ease; -moz-transition: padding 0.2s ease, margin 0.2s ease; -o-transition: padding 0.2s ease, margin 0.2s ease; -ms-transition: padding 0.2s ease, margin 0.2s ease; transition: padding 0.2s ease, margin 0.2s ease; }.tabs li:first-child a { z-index: 3; -webkit-border-top-left-radius: 8px; -moz-border-radius-topleft: 8px; border-top-left-radius: 8px; }.tabs li:nth-child(2) a { z-index: 2; }.tabs li:last-child a { z-index: 1; -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3); -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3); box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3); -webkit-border-top-right-radius: 8px; -moz-border-radius-topright: 8px; border-top-right-radius: 8px; }ul.tabs li a:hover { margin: 35px 0 0 0; padding: 10px 0 5px 0; }ul.tabs li a.active { margin: 30px 0 0 0; padding: 10px 0 10px 0; background: #545f60; color: #6edeef; /*color: #ff6831;*/z-index: 4; outline: none; }.group:before, .group:after { content: " "; /* 1 */ display: table; /* 2 */ }.group:after { clear: both; }#content { width: 390px; height: 200px; margin: 0 auto; background: #545f60; -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3); -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3); box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3); -webkit-border-bottom-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; }p { font-family: 'Open Sans', sans-serif; padding: 30px 40px; color: #ffffff; line-height: 26px; font-size: 18px; margin: 0; }

5、代码整体结构。