/*动态背景*/
* {
      margin: 0;
      padding: 0;
    }

    body,html {
      height: 250%; /*改这里的话让js动态效果全局覆盖*/
      width: 100%;
    }


    #github-iframe {
      position: fixed;
      left: 32px;
      top: 32px;
    }

    #area-render {
      position: fixed;
      width: 320px;
      height: 100px;
      right: 4px;
      bottom: 100px;
      border: dashed 1px #ccc;
    }
/* 定制公告栏音乐插件的样式 */
.aplayer {
    font-family: Arial,Helvetica,sans-serif;  /*音乐插件字体*/
    margin: 0px;  /*音乐插件与公告栏左边的边距，0px就是直接抵到公告栏左边的边上*/
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    border-radius: 2px;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: normal;
}
body {
color: #000;
background: url(https://files.cnblogs.com/files/binblog123/shuimu.bmp?a=1573904413500
) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}
#home {
opacity: 0.80;
margin: 100px 100px 100px 100px;
}

/*最外层容器样式*/
        .wrap {
            width: 100px;
            height: 100px;
            margin: 150px;
            position: relative;
        }

        /*包裹所有容器样式*/
        .cube {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-80deg);
            animation: rotate linear 20s infinite;
        }

        @-webkit-keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        .cube div {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.8;
            transition: all .4s;
        }

        /*定义所有图片样式*/
        .pic {
            width: 200px;
            height: 200px;
        }

        .cube .out_front {
            transform: rotateY(0deg) translateZ(100px);
        }

        .cube .out_back {
            transform: translateZ(-100px) rotateY(180deg);
        }

        .cube .out_left {
            transform: rotateY(-90deg) translateZ(100px);
        }

        .cube .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }

        .cube .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }

        .cube .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }

        /*定义小正方体样式*/
        .cube span {
            display: block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }

        .cube .in_pic {
            width: 100px;
            height: 100px;
        }

        .cube .in_front {
            transform: rotateY(0deg) translateZ(50px);
        }

        .cube .in_back {
            transform: translateZ(-50px) rotateY(180deg);
        }

        .cube .in_left {
            transform: rotateY(-90deg) translateZ(50px);
        }

        .cube .in_right {
            transform: rotateY(90deg) translateZ(50px);
        }

        .cube .in_top {
            transform: rotateX(90deg) translateZ(50px);
        }

        .cube .in_bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }

        /*鼠标移入后样式*/
        .cube:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }

        .cube:hover .out_back {
            transform: translateZ(-200px) rotateY(180deg);
        }

        .cube:hover .out_left {
            transform: rotateY(-90deg) translateZ(200px);
        }

        .cube:hover .out_right {
            transform: rotateY(90deg) translateZ(200px);
        }

        .cube:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }

        .cube:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }