CSS幽灵文字

最新推荐文章于 2024-07-25 10:45:42 发布

月亮很圆.

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量243

点赞数 5

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/L_Y_J_21/article/details/138890909

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

    <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);
        }
    }