Bonus-AI-LargeScreen/src/views/updateFace/midPic.vue

<template>
    <div class="faceMidPic">
        <div class="face3d">
            
            <img src="../../assets/images/faceBackCircle.png" alt="error" class="backImgCircle ">
            <img src="../../assets/images/faceBackMain.png" alt="error" class="faceBackMain">
        </div>
        <div class="face3dSec">
            <div class="face3dSecBox">
                <img src="../../assets/images/faceBackCircle.png" alt="error" class="faceLeftTwoCircle">
                <img src="../../assets/images/faceleft.png" alt="error" class="facePicTwo" @click="open">
            </div>
            <div class="face3dSecBox">
                <img src="../../assets/images/faceBackCircle.png" alt="error" class="faceLeftTwoCircle">
                <img src="../../assets/images/faceright.png" alt="error" class="facePicTwo">
            </div>
        </div>
    </div>
</template>

<script>
export default {
data(){
    return{
      
    }
},
methods:{
    open() {
        this.$prompt('请输入邮箱', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '你的邮箱是: ' + value
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }
}
}
</script>

<style scoped>
.faceMidPic {
    flex: 4;
    display: flex;
    flex-direction: column;
    position: relative;
}

.face3d {
    flex: 2;
    position: relative;

}

.face3dSec {
    position: relative;
    flex: 2;
    display: flex;

}

.faceBackMain {
    position: absolute;
    height: 50%;
    top: 13%;
    left: 44.4%;
    animation: flash 4s infinite alternate;

}

.backImgCircle {
    position: absolute;
    height: 100%;
    left: 36.3%;

}

.faceLeftTwoCircle {
    position: absolute;
    bottom: 5%;
    left: 24%;
    height: 100%
}

.face3dSecBox {
    flex: 1;
    position: relative;
}

.facePicTwo {
    position: absolute;
    height: 46%;
    left: 42%;
    top: 18%;
    animation: moveandflash 4s infinite alternate;

}


@keyframes flash {
    0% {

        transform: translateY(0) translateZ(0rem);
    }

    30% {
        opacity: .43;
        transform: rotateY(180deg) translateZ(1.25rem);
    }

    43% {
        opacity: 1;
        transform: translateY(0);
    }

    45% {
        opacity: 0.43;
    }

    46% {
        opacity: 1;

    }

    47% {
        opacity: .6;

    }

    48% {
        opacity: .9;

    }

    49% {
        opacity: .2;

    }

    50% {
        opacity: 1;

    }

    51% {
        opacity: .2;

    }

    52% {
        opacity: .9;

    }

    53% {
        opacity: .6;
    }

    54% {
        opacity: 1;
    }

    55% {
        opacity: 0;
    }

    57% {
        opacity: 1;
    }

    30% {
        opacity: .43;
        transform: rotateY(180deg) translateZ(1.25rem);
    }

    80% {
        transform: translateY(0) translateZ(0rem);
    }

    90% {
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }

    100% {
        transform: translateY(0) translateZ(0rem);
    }
}

@keyframes moveandflash {
    0% {
        transform: translateY(0) translateZ(0rem);
    }

    10% {
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }

    20% {
        transform: translateY(0rem) translateZ(0rem);
    }

    30% {
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }

    43% {
        opacity: 1;
        transform: translateY(-0.8125rem) translateZ(1.25rem);
    }

    45% {
        opacity: 0;
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }

    46% {
        opacity: 1;
        transform: translateY(-0.875rem) translateZ(1.25rem);
    }

    47% {
        opacity: .6;
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }

    48% {
        opacity: .9;
        transform: translateY(-0.75rem) translateZ(1.25rem);
    }

    49% {
        opacity: .2;
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }

    50% {
        opacity: 1;
        transform: translateY(-0.875rem) translateZ(1.25rem);
    }

    51% {
        opacity: .2;
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }

    52% {
        opacity: .9;
        transform: translateY(-0.75rem) translateZ(1.25rem);
    }

    53% {
        opacity: .6;
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }

    54% {
        opacity: 1;
        transform: translateY(-0.875rem) translateZ(1.25rem);
    }

    55% {
        opacity: 0;
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }

    57% {
        opacity: 1;
        transform: translateY(-0.8125rem) translateZ(1.25rem);
    }

    70% {
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }

    80% {
        transform: translateY(0) translateZ(0rem);
    }

    90% {
        transform: translateY(-0.9375rem) translateZ(1.25rem);
    }

    100% {
        transform: translateY(0) translateZ(0rem);
    }
}
</style>