责任链模式：原理与实现解析，及其应用场景代入

    <div class="mask">
        <span style="--i:1">H</span>
        <span style="--i:2">E</span>
        <span style="--i:3">L</span>
        <span style="--i:4">L</span>
        <span style="--i:5">O</span>
        <span style="--i:6">W</span>
        <span style="--i:7">O</span>
        <span style="--i:8">R</span>
        <span style="--i:9">L</span>
        <span style="--i:10">D</span>
    </div>

    .mask {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 50px;
        height: 100vh;
        background-color: #000;
        color: #fff;
        span {
            animation: blur 4s ease-in-out infinite;
            animation-delay: calc(0.2s*var(--i));
        }
    }
    @keyframes blur {
        0% {
            opacity: 1;
            filter: blur(0px);
            transform: scale(1);
        }
        30% {
            opacity: 0;
            filter: blur(20px);
            transform: scale(2);
        }
        60%,
        120% {
            opacity: 1;
            filter: blur(0px);
            transform: scale(1);
        }
    }