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="faceLeftTwo">
            </div>
            <div class="face3dSecBox">
                <img src="../../assets/images/faceBackCircle.png" alt="error" class="faceLeftTwoCircle">
                <img src="../../assets/images/faceright.png" alt="error" class="faceRightTwo">
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

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

.face3d {
    flex: 2.5;
    position: relative;

}

.faceBackMain {
    position: absolute;
    height: 90%;
    top: 10%;
    left: 43.2%;

}

.backImgCircle {
    position: absolute;
    height: 150%;
    left: 35%;

}


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

}



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

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




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

}

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

}

@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>