*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    background-color:#f85d25;
    /******                               弹性盒子          *****/
    display: flex;
    justify-content: center;
    align-items: center;
}
.word{
    color: #fff;
    word-spacing: 5px;
    text-shadow: 0 13px 10px rgba(0, 0, 0, .3)
}
.face{
    position: relative;
    width: 110px;
    height: 100px;
    border-radius: 10px;
    background-color:#f00;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
    /****************************************     动画            **********/
    animation: jump .8s infinite alternate;
}
.face:hover{
    transform: rotateY(180deg);
    transition: 1s;
}
.face.blue{
    background-color:#1a1aac;
    /**           动画延迟              */
    animation-delay: .5s;
}
.face.blue .eye .eyeBall{
    background-color: #fde039;
}
.face.blue .mouth{
    background-color: pink; 
}
.face .eye{
    width: 40%;
    height: 40%;
    border-radius:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:#fff;
}
.face .eye .eyeBall{
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background-color:#5dee24;
    animation: eyeJump 1.6s infinite alternate;
}
.face .mouth{
    width: 50%;
    height: 8%;
    margin-top: 20%;
    border-radius: 25%;
    background-color: #fff;
}

/********************                伪元素选择器    before    和  after            ************************/
.face::before,
.face::after{
    position: absolute;
    top: -10px;
    left: 50%;
    content: '';
    display: block;
    width: 20%;
    height: 10px;
    border-radius: 10px;
    background-color: #fff;
}
/***************************        css3    3D旋转              **************/
.face::before{
    transform: translateX(-70%) rotate(45deg);
}
.face::after{
    transform: translateX(-30%) rotate(-45deg);
}
/**********************             @keyframes 动画               ********************/
@keyframes jump{
    50%{
        transform: translateY(-80px); 
        box-shadow: 0 100px 20px rgba(0, 0, 0, .1)
    }
    100%{
        transform: translateY(0); 
    }
}
@keyframes eyeJump{
    0%,10%
    {
        transform: translateX(-50%);
    }
    90%,
    100%{
        transform: translateX(50%);
    }
}
/*************            loading界面             ******************/
.loading{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #5dee24;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: opacity 0.5s;
}
.loading .wait{
    position: relative;
    width: 250px;
    height: 10px;
    margin: 30px;
    border-radius: 10px;
    text-align: center;
    /* display: flex;
    justify-content: center;
    align-items: left;
    flex-direction: column; */
    background-color: #fff;
}
.loading .wait::before{
    position: absolute;
    left: 50%;
    content: '加载中';
    font-size: 18px;
    color: #d6fa0b;
    transform:translateY(-24px) translateX(-50%);
}
.loading .wait .full{
    position: absolute;
    width: 0;
    height:100%;
    border-radius: 10px;
    background-color: red;
}