body {
                background-image: url("../images_file_Lab/bg.gif");
            }
            
            .container {
                height: 60vh;
            }
            
            .footer {
                color: white;
                text-align: center;
            }
            
            .titleTxt {
                color: black;
                font-size: large;
                font-family: Arial, Helvetica, sans-serif;
            }
            
            #box-perspective {
                width: 100px;
                height: 100px;
                margin: auto;
                margin-top: 50px;
                perspective: 800px;
                perspective-origin: 50% 50%;
            }
            
            #box-preserve-3d {
                position: absolute;
                width: 100px;
                height: 100px;
                transform-style: preserve-3d;
            }
            
            #box-preserve-3d div {
                position: absolute;
                width: 100px;
                height: 100px;
                text-align: center;
                line-height: 100px;
            }
            
            .ball-center-x {
                border: 1px solid red;
                border-radius: 100px;
                width: 200px;
                height: 200px;
                transform: rotateY(-90deg);
                transform-origin: 50% 50%;
            }
            
            .ball-center-x-one {
                border: 1px solid green;
                border-radius: 100px;
                width: 200px;
                height: 200px;
                transform: rotateY(0deg);
                transform-origin: 50% 50%;
            }
            
            .ball-center-x-two {
                border: 1px solid blue;
                border-radius: 100px;
                width: 200px;
                height: 200px;
                transform: rotateY(30deg);
                transform-origin: 50% 50%;
            }
            
            .ball-center-x-three {
                border: 1px solid yellow;
                border-radius: 100px;
                width: 200px;
                height: 200px;
                transform: rotateY(60deg);
                transform-origin: 50% 50%;
            }
            
            .ball-center-x-four {
                border: 1px solid yellow;
                border-radius: 100px;
                width: 200px;
                height: 200px;
                transform: rotateY(120deg);
                transform-origin: 50% 50%;
            }
            
            .ball-center-x-five {
                border: 1px solid yellow;
                border-radius: 100px;
                width: 200px;
                height: 200px;
                transform: rotateY(150deg);
                transform-origin: 50% 50%;
            }
            
            .ball-center-y {
                border: 1px solid pink;
                border-radius: 100px;
                width: 200px;
                height: 200px;
                transform: rotateX(90deg);
                transform-origin: 50% 50%;
            }
            
            .ball-center-y-one {
                border: 1px solid purple;
                border-radius: 100px;
                width: 200px;
                height: 200px;
                transform: rotateX(0deg);
                transform-origin: 50% 50%;
            }
            
            .ball-center-y-two {
                border: 1px solid cyan;
                border-radius: 100px;
                width: 200px;
                height: 200px;
                transform: rotateX(30deg);
                transform-origin: 50% 50%;
            }
            
            .ball-center-y-three {
                border: 1px solid orange;
                border-radius: 100px;
                width: 200px;
                height: 200px;
                transform: rotateX(60deg);
                transform-origin: 50% 50%;
            }
            
            .ball-center-y-four {
                border: 1px solid orange;
                border-radius: 100px;
                width: 200px;
                height: 200px;
                transform: rotateX(120deg);
                transform-origin: 50% 50%;
            }
            
            .ball-center-y-five {
                border: 1px solid orange;
                border-radius: 100px;
                width: 200px;
                height: 200px;
                transform: rotateX(150deg);
                transform-origin: 50% 50%;
            }
            
            #box-perspective {
                width: 100px;
                height: 100px;
                margin-left: 260px;
                margin-top: 222px;
                perspective: 800px;
                perspective-origin: 50% 50%;
            }
            
            #box-preserve-3d {
                position: absolute;
                width: 100px;
                height: 100px;
                transform-style: preserve-3d;
            }
            
            #box-preserve-3d div {
                position: absolute;
                width: 100px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                color: white;
                font-size: 26px;
            }
            
            #top {
                background-image: url('../images_file_Lab/top.png');
                background-size: 100px;
                transform: rotateX(90deg) translateZ(100px);
                transform-origin: 50% 50%;
            }
            
            #bottom {
                background-image: url('../images_file_Lab/top.png');
                background-size: 100px;
                transform: rotateX(-90deg) translateZ(100px);
                transform-origin: 50% 50%;
            }
            
            #left {
                background-image: url('../images_file_Lab/left.png');
                background-size: 100px;
                transform: rotateY(90deg) translateZ(100px);
                transform-origin: 50% 50%;
            }
            
            #right {
                background-image: url('../images_file_Lab/left.png');
                background-size: 100px;
                transform: rotateY(-90deg) translateZ(100px);
                transform-origin: 50% 50%;
            }
            
            #front {
                background-image: url('../images_file_Lab/front.png');
                background-size: 100px;
                transform: translateZ(100px);
                transform-origin: 50% 50%;
            }
            
            #back {
                background-image: url('../images_file_Lab/front.png');
                background-size: 100px;
                transform: translateZ(-100px) rotateY(-180deg);
                transform-origin: 50% 50%;
            }
            
            @keyframes turn3d {
                0% {
                    transform: rotateY(0) rotateX(0deg);
                }
                100% {
                    transform: rotateY(360deg) rotateX(360deg);
                }
            }
            
            #box-preserve-3d {
                animation: turn3d 10s infinite linear;
            }
            
            .loginbox {
                position: fixed;
                width: 455px;
                top: 25%;
                right: 25%;
            }
            
            .loginbox>div {
                background-color: white;
                border-radius: 4px;
                box-shadow: 5px 5px 20px #4444;
                padding: 20px;
            }
            
            .milky {
                font-size: 48px;
                /*设置文字大小*/
                color: #3366FF;
                /*设置文字颜色*/
                text-shadow: 0 8px 10px #6699FF;
                /*设置文字阴影*/
                font-weight: bolder;
                /*设置文字宽度*/
                text-align: center;
                /*设置文字居中*/