body{
            padding: 0;
            margin: 0;
            background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1518971235988&di=8140e0aa464285df91fc1af6d7237271&imgtype=0&src=http%3A%2F%2Fimg3.iqilu.com%2Fdata%2Fattachment%2Fforum%2F201308%2F22%2F091838td1dfvgvapxrenmd.jpg);
            height: 100%;
            width: 100%;
        }
        #home {
        width: 90%;
        margin-top: 100px;;

      over-flow:hidden;
        }
        #blogTitle h1 a {
        display:none;
        font-family: 微软雅黑;
        }
        #blogTitle h2 {
        font-family: 微软雅黑 ;
        }
        .postTitle a:link, .postTitle a:visited, .postTitle a:active {
        font-family: 微软雅黑;
        color: #3167FF;
        }
        .c_b_p_desc {
        font-family: 微软雅黑;
        }
        .postTitle {
        border-left: 3px solid #0339FD;
        }
        .catListTitle {
        display:none;
        font-weight: bold;
        line-height: 1.2;
        margin-top: 21px;
        margin-bottom: 10.5px;
        border-left:10px solid #FFB04F;
        padding: 10px 0 10px 14px;
        text-align: left;
        font-family: 仿宋;
        }
        #profile_block {
        font-family: 微软雅黑;
        }
        #navigator {
        display:none;
        font-family: 微软雅黑;
        }
        * {
        font-family: 微软雅黑;
        }
        #navList {
            height: 600px;
            width: 600px;
            margin: 40px auto;
            position: relative;
            list-style: none;
        }
        #navList li {
            border: 2px solid #394057;
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 50%;
            transform: translate(-50%,-50%);
            box-sizing: border-box;
            animation-iteration-count:infinite;
            animation-name:orbit;
            animation-timing-function:linear;
        }
        #navList li span {
            display: block;
            position: absolute;
            left: 0;
            height: 30px;
            width: 30px;
            border-radius: 50%;
        }
        #navList li:nth-child(1){
            height: 60px;
            width: 60px;
            border:none;
           
            /*background-color: #c90;*/
            display: block;
           /* animation-duration:5s;*/

        }
        #navList li:nth-child(2){
            height: 120px;
            width: 120px;
            animation-duration:6s;

        }
        #navList li:nth-child(2) span{
        	background-image: -webkit-gradient(linear, left top, left bottom, from(#e6946f), to(#450115));
            background-image: -moz-linear-gradient(#e6946f, #450115);
            /*background-color: yellow;
            border:0.5rem solid #272935;*/
            left: 80px;
            top:0;
        }
        #navList li:nth-child(3){
            height: 180px;
            width: 180px;
            animation-duration:20s;

           

        }
        #navList li:nth-child(3) span{
        	background-image: -webkit-gradient(linear, left top, right bottom, from(#ffffff), to(#422415));
            background-image: -moz-linear-gradient(#ffffff, #422415);
            left: 22px;
            top:0;

        }
          @keyframes change {
             0%{
                 transform:translate(-50%,-50%) rotateY(0deg)  ;
             }
             50%{
                 transform:translate(-50%,-50%) rotateY(180deg) ;
             }
          
         }   
        #navList li:nth-child(4){
            height: 240px;
            width: 240px;
            animation-duration:12s;
 animation: change 8s linear infinite;
        }
        #navList li:nth-child(4) > span{
        	background-image: -webkit-gradient(linear, left top, left bottom, from(#e4bbf7), to(#520138));
            background-image: -moz-linear-gradient(#e4bbf7, #520138);
            left: 204px;
            top:43px;
            animation: orbit 2s infinite linear;
        }
        /*#navList li:nth-child(4) > span span {
            width: 6px;
            height: 6px;
            left: 16px;
            background-color: yellow;
        }*/
        #navList li:nth-child(5){
            height: 300px;
            width: 300px;
            animation-duration:16s;

        }
        
        li:nth-child(4) span:after {
		    content: "";
		    width: 6px;
		    height: 6px;
		    display: block;
		    border-radius: 50%;
		    /*background-image: -webkit-gradient(linear, left top, left bottom, from(#272935), to(#e09f08));
            background-image: -moz-linear-gradient(#272935, #e09f08);*/
		    background-color: #c37e01;
		    position: absolute;
		    top: -10px;
		}
        #navList li:nth-child(5) span{
        	background-image: -webkit-gradient(linear, left top, left bottom, from(#ec56c0), to(#42010a));
            background-image: -moz-linear-gradient(#ec56c0, #42010a);
            left: 70px;
            top:0px;

        }
        #navList li:nth-child(6) {
            width: 360px;
            height: 360px;
            animation-duration: 13s;

           
        }
        #navList li:nth-child(6) span {
        	background-image: -webkit-gradient(linear, left top, left bottom, from(#272935), to(#e09f08));
            background-image: -moz-linear-gradient(#272935, #e09f08);
            left: -10px;
            top: 200px;
        }
        #navList li:nth-child(7) {
            width: 420px;
            height: 420px;
            animation-duration: 12s;
        }
        #navList li:nth-child(7) > span {
        	background-image: -webkit-gradient(linear, left top, left bottom, from(#bfa4c0), to(#0a0101));
            background-image: -moz-linear-gradient(#bfa4c0, #0a0101);;
            left: 300px;
            top: 18px;
        }
        #navList li:nth-child(7) > span span {
            width: 15px;
            height: 15px;
            border: 2px solid #CCC;
            left: -4px;
            top: -4px;
            transform: skew(0deg, 45deg);
        }
        #navList li:nth-child(8) {
            width: 480px;
            height: 480px;
            animation-duration: 10s;
        }
        #navList li:nth-child(8) span {
        	background-image: -webkit-gradient(linear, left top, left bottom, from(#b3c3dd), to(#3b1e5e));
            background-image: -moz-linear-gradient(#b3c3dd, #3b1e5e);
        	
            left: -8px;
            top: 170px;
        }
        #navList li:nth-child(9) {
            width: 540px;
            height: 540px;
            animation-duration: 4s;
        }

        #navList li:nth-child(9) span {
        	background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f1f2), to(#500f38));
            background-image: -moz-linear-gradient(#f8f1f2, #500f38);
            left: 32px;
            top: 100px;
        }

        #navList li:nth-child(10) {
            width: 600px;
            height: 600px;
            animation-duration: 6s;
        }

        #navList li:nth-child(10) span {
        	background-image: -webkit-gradient(linear, left top, left bottom, from(#da504d), to(#0c0002));
            background-image: -moz-linear-gradient(#da504d, #0c0002);
            left: 186px;
            top: 0;
        }
    @keyframes orbit {
                0% {
                    transform: translate(-50%, -50%) rotate(0deg);
                }

                100% {
                    transform: translate(-50%, -50%) rotate(360deg);
                }
            }
        /*#navList li a {
            font-size: 8px;
            text-decoration:none; 
            color:#fff;
            text-align:center;
            display: block;
            cursor: pointer;
            
        }*/
         .menu {
               position:absolute;
                width: 100%;
                height: 100%;
                border-radius: 30px;
                border: none;
                color: #fff;
                
                background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf6a0), to(#e09f08));
                background-image: -moz-linear-gradient(#fcf6a0, #e09f08);
                animation: ease-in-out breath 1000ms infinite alternate;
                -webkit-animation: ease-in-out breath 1000ms infinite alternate;
                cursor: pointer;
            }
            @keyframes move1 {
            0%{
                transform:  rotateZ(0deg);
            }
            100%{
                transform: rotateZ(360deg) ;
            }
        }
            @keyframes breath {
                0% {
                    opacity: .2;
                    box-shadow: 0 2px 1px #e09f08;
                }
                100% {
                    opacity: 1;
                    box-shadow: 10px 10px 150px 2.5rem #fcf6a0;
                }
            }
            
            @-webkit-keyframes breath {
                0% {
                    opacity: .2;
                    box-shadow: 0 2px 1px #e09f08;
                }
                100% {
                    opacity: 1;
                    box-shadow: 10px 10px 150px 2.5rem #fcf6a0;
                }
            }
#navList {
         	margin-left: 10%;


      margin-bottom:-150px;;
over-flow:hidden;
         }
#navList a {
     margin: 0 0; 
    padding: 0 0; 
    font: 14px/1.5em "微软雅黑"; 
    display: inline-block; 
}