body{
  cursor: url("https://images.cnblogs.com/cnblogs_com/xzsj/1888303/o_201214083917cursor.jpg"), auto;
  background: url(https://images.cnblogs.com/cnblogs_com/xzsj/1888303/o_210714062547coffee-6371149_1920.jpg) fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 右上角广播 */
#xzsjBroadcast{
    position: absolute;
    right: 100px;
    top: 60px;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #fff;
    text-shadow: 5px 5px 5px #333;
    z-index: 999;
}
#xzsjBroadcast img{
    width: 60px;
    height: 60px;
    animation: broadcast .3s linear infinite alternate;
}
#xzsjBroadcast a{
    color: #ffffff;
}
#xzsjBroadcast a:hover{
    color: #36AFE7;
}
@keyframes broadcast{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(-30px);
    }
}

/* 主体内容 */
#home{
  opacity: .9;
  width: 90%;
}

#blogTitle {
    width: 100%;
    height: 100px;
    background: url(https://images.cnblogs.com/cnblogs_com/xzsj/1884735/o_2107140815581.png) no-repeat;
    background-size: contain;
}
#navigator{
    width: 70%;
    background: none;
    margin-top: 40px;
    transition: all .2s linear;
}
#navigator:hover{
    box-shadow: 0px 0px 10px 6px #333;
    transform: translate(2px,-5px);
    border-radius: 5px;
}

#navList a:hover{
    color: skyblue;
}

#main {
    background: none;
    font-size: 14px;
    color:#333;
}
#mainContent{
    width: 78%;
    /* background: none; */
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.postTitle{
    border-left: none;
}
.postCon{
    width: 98%;
}

/*  博客侧边栏公告样式 */

#sideBar{
    width: 20%;
    background:#fff;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0px 0px 10px 3px #333;
}
#sideBarMain {
    width: 100%;
}

#sideBar a:link{
    color: #333;
}

#sideBarMain>#sidebar_news>h3{
  display:none;
}
.xzsjAbout{
  margin-bottom:20px;
  color: seagreen;
  text-align:center;
  font-family: KaiTi;
}
.xzsjTitle{
  font-size:24px;
  text-align:center;
  border-bottom: 3px solid #008B8F;
  margin-top:40px;
}
.xzsjDesc{
  margin: 20px 0px;
  text-align:left;
}
.xzsjSpan:hover{
  color:red;
  cursor:pointer;
}
.xzsjDesc p{
  margin: 10px 0px;
  line-height: 20px;
  position: relative;
}
.xzsjDesc a{
    color: #494B58;
}
.xzsjA{
  margin-right: 5px;
  z-index: 99999999999999999999;
}
.xzsjA:hover{
  text-decoration: none;
  color: red;
}
.xzsjASplice{
    margin-left: 40px;
}
.xzsjDescP{
    text-indent:2em;
}
.xzsjInput{
  width: 12vw;
}
.xzsjImg{
  margin: 20px 0px;
  width:200px;
  height:150px;
  transition: all 1s;
  box-shadow: 1px 1px 2px #36AFE7;
  border-radius:  50%;
}
.xzsjImg:hover{
  transform: scale(1.2);
  box-shadow: 3px 3px 6px #36AFE7;
  border-radius: 10px;
}
.clockdiv{
  text-align: center;
}
.xzsWechatOC{
    color:#494B58;
}
.xzsWechatOC:hover{
    cursor: pointer;
    color: red;
}
.wocQRCode{
    width: 120px;
    height: 120px;
    z-index: -999;
    opacity: 0;
}
.xzsj_qrcode{
    position: relative;
}
#oc_img{
    position: absolute;
    top: -50px;
}
#teacher_img{
    position: absolute;
    top: -50px;
}
#java_qrcode{
    position: absolute;
    top: -50px;
    left: 30px;
}
#frontend_qrcode{
    position: absolute;
    top: -50px;
    left: 60px;
}
.xzsWechatOC:hover+#teacher_img{
    opacity: 1;
    z-index: 9999999;
}

.xzsWechatOC:hover+#java_qrcode{
    opacity: 1;
    z-index: 9999999;
}
.xzsWechatOC:hover+#frontend_qrcode{
    opacity: 1;
    z-index: 9999999;
}

.xzsWechatOC:hover+#oc_img{
   opacity: 1;
   z-index: 9999999;
}

/* 博客园页脚样式 */
.xzsj-footer{
  margin-top: -100vh;
}
.xzsj-footer-a{
  position: fixed;
  display:none;
  right: 10px;
  bottom: 5px;
  width: 150px;
  height: 175px;
  background: url(https://images.cnblogs.com/cnblogs_com/xzsj/1888303/o_210715075417rocket_top.png);
  cursor:pointer;
}
.xzsj-footer-a:hover{
 animation: fireTop .4s steps(1) infinite;
  background: url(https://images.cnblogs.com/cnblogs_com/xzsj/1888303/o_210715075000rocket_frame.png);
}
@keyframes fireTop{
    0%{
        background-position-x: 0;
    }
    25%{
        background-position-x: 150px;
    }
    50%{
        background-position-x: 300px;
    }
    75%{
        background-position-x: 450px;
    }
    100%{
        background-position-x: 600px;
    }
}