body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-image: url("../images/main-foot.png"), url("../images/login.png");
    background-repeat: no-repeat, no-repeat;
    background-position: bottom 0vh center, center;
    background-size: auto, 100% 100%;
    animation: moveBackground 3s linear infinite;
}

/* 云彩动画 */
@keyframes moveBackground {
    0% {
        background-position: bottom 0vh center, center;
    }

    50% {
        background-position: bottom 6vh center, center;
    }

    100% {
        background-position: bottom 0vh center, center;
    }
}

.wrapper {
    position: relative;
    display: flex;
    overflow: visible;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

/* logo */
.wrapper h1 {
    width: 320px;
    height: 80px;
    line-height: 75px;
    margin: 80px 0px 10px 0px;
    color: #fff;
    background-image: url(../images/sprite1.png);
    background-position: -60px -1050px;
    background-size: 1058px 1337px;
}

/* 输入框 */
.wrapper input,
.wrapper a {
    width: 300px;
    height: 30px;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #fff;
}

/* 聚焦时边框颜色 */
.wrapper input:focus {
    border: 1px solid #ccc;
    outline: none;
    border-color: #28a745;
}

/* 邮箱验证码输入框 */
.wrapper .email_code {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 30"><text x="50" y="20" font-family="Arial" font-size="14" fill="%2328a745" text-anchor="middle">获取验证码</text></svg>');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 90px 30px;
}

/* 找回密码 */
.recover_password {
    position: absolute;
    top: 215px;
    right: 10px;
    width: 90px;
    height: 30px;
    color: #919c9f;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

/* 获取邮箱验证码 */
.get_email_code {
    position: absolute;
    top: 305px;
    right: 10px;
    width: 90px;
    height: 30px;
    cursor: pointer;
}

/* 验证码输入框 */
.wrapper .captcha {
    padding-right: 120px;
    box-sizing: border-box;
    background: #fff no-repeat right center;
    background-size: 100px 30px;
}

/* 登录/注册页面图形验证码 */
.login_captcha,
.regist_captcha {
    position: absolute;
    top: 255px;
    right: 10px;
    width: 90px;
    height: 30px;
    color: #919c9f;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

/* 找回密码页面图形验证码 */
.recover_captcha {
    position: absolute;
    top: 345px;
    right: 10px;
    width: 90px;
    height: 30px;
    color: #919c9f;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.wrapper h1 {
    text-align: center;
}

/* 按钮 */
.wrapper a {
    text-align: center;
    line-height: 10px;
    background-image: url(../images/sprite2.png);
    background-size: calc(1012px * (300 / 420)) calc(1386px * (30 / 55));
    background-position: calc(-8px * (300 / 420)) calc(-85px * (30 / 55));
}

/* 动画元素样式 */
.animation {
    width: 310px;
    height: 297px;
    background-image: url(../images/sprite3.png);
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    bottom: 0;
    filter: brightness(1) contrast(0.8);
    animation: spriteFrames 1.5s steps(11) infinite,
        moveWithDelay 6.5s linear infinite;
}

/* 精灵图帧切换动画 */
@keyframes spriteFrames {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -3668.5px;
    }
}

/* 白鹤移动动画 */
@keyframes moveWithDelay {
    0% {
        transform: translateX(0) translateY(-9.09vh);
    }

    10% {
        transform: translateX(-10vw) translateY(calc(-9.09vh - 6.1vh));
    }

    20% {
        transform: translateX(-20vw) translateY(calc(-9.09vh - 12.2vh));
    }

    30% {
        transform: translateX(-30vw) translateY(calc(-9.09vh - 18.3vh));
    }

    40% {
        transform: translateX(-40vw) translateY(calc(-9.09vh - 24.4vh));
    }

    50% {
        transform: translateX(-50vw) translateY(calc(-9.09vh - 30.5vh));
    }

    60% {
        transform: translateX(-60vw) translateY(calc(-9.09vh - 36.6vh));
    }

    70% {
        transform: translateX(-70vw) translateY(calc(-9.09vh - 42.7vh));
    }

    80% {
        transform: translateX(-80vw) translateY(calc(-9.09vh - 48.8vh));
    }

    90% {
        transform: translateX(-90vw) translateY(calc(-9.09vh - 54.9vh));
    }

    100% {
        transform: translateX(-99.99vw) translateY(-70vh);
    }
}