<template>
    <div class="loading-content">
        <div class="loading">
            <img class="img1" src="../assets/01.png" alt="" />
            <img class="img2" src="../assets/02.png" alt="" />
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.loading-content {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
}

.loading {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    border-width: 0;
    width: 60%;
    .img1 {
        position: absolute;
        left: -1px;
        top: -1px;
        right: -1px;
        bottom: -1px;
        z-index: 2;
        display: block;
        width: calc(100% + 4px);
        height: calc(100% + 4px);
    }

    .img2 {
        position: relative;
        z-index: 0;
        display: block;
        width: 100%;
        height: auto;
    }

    @keyframes flipYLight {
        0% {
            left: -40%;
            opacity: 0.5;
            width: 10px;
        }
        50% {
            left: 20%;
            opacity: 0;
            width: 35px;
        }
        100% {
            left: 90%;
            opacity: 0.5;
            width: 10px;
        }
    }

    &::after {
        content: '';
        background-color: #fff;
        position: absolute;
        background: #fff;
        width: 25px;
        height: 100vw;
        top: 0;
        left: 45px;
        opacity: 1;
        transform: skewX(-25deg);
        z-index: 1;
        animation: flipYLight 1.5s linear infinite;
    }
}
</style>
