<div class="container">

    <p>Explorer</p>

    <p>Discovery</p>

</div>

html, body {

    margin:;

    padding:;

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: black;

}

/* 为容器设置对比度滤镜 */

.container{

    filter: contrast(10);

    background-color: black;

    overflow: hidden;

}

p{

    margin:;

    color: white;

    font-size: 50px;

    font-weight: bold;

    font-family: sans-serif;

    text-transform: uppercase;

    text-align: center;

    animation: show-hide 10s infinite;

    filter: opacity(0);

}

/* 让2段文本重叠 */

p:nth-child(1){

    transform: translateY(50%);

    /* 让2段文本交替显示 */

    animation-direction: normal;

}

p:nth-child(2){

    transform: translateY(-50%);

    animation-direction: reverse;

}

@keyframes show-hide{

    0%{

        /* blur: 模糊 */

        filter: opacity(0) blur(0.08em);

        /* 增加字间距的变化效果 */

        letter-spacing: -0.8em;

    }

    25%{

        filter: opacity(1) blur(0.08em);

    }

    40%{

        filter: opacity(1) blur(0.08em);

    }

    50%{

        filter: opacity(0) blur(0.08em);

        letter-spacing: 0.24em;

    }

}