*{
    margin: 0;
}
.content{
    width: 100%;
    background-image: url(./HUA.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
}

.content .mask{
    width: 100%;
    height: 110px;
    position: absolute;
    top: 41%;
    z-index: 999;
}

.content .viewOrderNumber{
    width: 55%;
    height: 50px;
    position: absolute;
    top: 40%;
    left: 22.5%;
}

.content .handleClick{
    width: 10%;
    height: 50px;
    position: absolute;
    top: 47.5%;
    left: 46.53%;
    animation-name: zoomIn;
    animation-duration: 1s; /* 动画持续时间 */
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear; /* 缓动函数，让动画开始和结束时缓慢 */
    z-index: 99;
}

.clickWave1,.clickWave2{
    position: absolute;
}
.content .clickWave1{   /* wave的外层 */
    top: 46.5%;
    left: 46%;
    border: 3px solid rgb(230,230,230);
    border-radius: 50%;
    height: 19px;
    width: 19px;
    padding: 1%;
    animation-name: outerSemicircle;
    animation-duration: 1s; /* 动画持续时间 */
    animation-iteration-count: infinite;
    animation-direction: normal;
}
.content .clickWave2{
    border: 3px solid rgb(230,230,230);
    /* border-top-right-radius: 20px;
    border-top-left-radius: 20px; */
    border-radius: 50%;
    height: 13px;
    width: 13px;
    animation-name: innerSemicircle;
    animation-duration: 1s; /* 动画持续时间 */
    animation-iteration-count: infinite;
    animation-direction: normal;
}

@keyframes zoomIn {
    0% {
        transform: scale(1.20); /* 初始状态，图片保持原大小 */
    }
    10%{
        transform: scale(1.18);
    }
    20%{
        transform: scale(1.16);
    }
    30%{
        transform: scale(1.14);
    }
    40%{
        transform: scale(1.12);
    }
    50%{
        transform: scale(1.1);
    }
    60%{
        transform: scale(1.08);
    }
    70%{
        transform: scale(1.06);
    }
    80%{
        transform: scale(1.04);
    }
    90%{
        transform: scale(1.02);
    }
    100% {
      transform: scale(1);
    }
}

@keyframes innerSemicircle {
    0% {
        border: 3px solid transparent;
    }
    70% {
        border: 3px solid rgb(230,230,230);
    }
    100% {
        border: 3px solid rgb(230,230,230);
    }
}

@keyframes outerSemicircle {
    0% {
        border: 3px solid transparent;
    }
    40% {
        border: 3px solid transparent;
    }
    100%{
        border: 3px solid rgb(230,230,230);
    }
}