<script setup lang="ts">

</script>

<template>
    <div class="logoContainer">
        <div class="logoContent">
            <div class="logoLine1">
                <span>星</span><span>撰 <div class="myMask"></div></span>
            </div>
            <div class="logoLine2">star writ</div>
        </div>
    </div>
</template>

<style scoped>
@media (max-width: 767px) {
    .logoContainer {
        font-size: 10px;
    }
}
.logoContainer{
    position: relative;
    height: 100%;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    .logoContent{
        position: relative;
        padding: 5px 20px;
        & > div{
            position: relative;
        }
        & > div.logoLine1{
            font-size: 1.5em;
            text-align: center;
            font-family: KingHwa_OldSong, sans-serif;
            & > span{
                position: relative;
                padding: 0.2em;
            }
            & > span:last-child{
                & > div.myMask {
                    position: absolute;
                    overflow: hidden;
                    box-sizing: border-box;
                    width: 0;
                    height: 100%;
                    top: 0;
                    left: 0;
                    font-size: inherit;
                    background: #000;
                    animation: ChangeWidth 500ms ease-in-out 300ms forwards;

                    &:last-child::after {
                        content: '撰';
                        color: #fff;
                        position: absolute;
                        overflow: hidden;
                        box-sizing: border-box;
                        width: 100%;
                        height: 100%;
                        padding: 0 0.2em;
                        text-align: center;
                        left: 0;
                        font-size: inherit;
                        background: transparent;
                    }
                }
            }
        }
        & > div.logoLine2{
            height: 40%;
            width: 100%;
            font-size: 100%;
            line-height: 1em;
            letter-spacing: 0.1em;
            text-align: center; /* 两端对齐 */
            white-space: nowrap; /* 禁止换行 */
            overflow: hidden; /* 隐藏超出部分 */
            font-family: "LXGW WenKai", sans-serif;
        }
    }
}
@keyframes ChangeWidth {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
</style>
