css+jquery实现带阴影立体选项卡效果代码-html代码-BFW代码库

css+jquery实现带阴影立体选项卡效果代码

代码语言：html

所属分类：选项卡

代码描述：css+jquery实现带阴影立体选项卡效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400&subset=latin,latin-ext);
    
    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;
    }
    #conte.........完整代码请登录后点击上方下载按钮下载查看