css3 制作炫酷的发光文字动画

最新推荐文章于 2024-03-29 03:34:03 发布

huxiaoxiao.

最新推荐文章于 2024-03-29 03:34:03 发布

阅读量413

点赞数

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

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121526921

版权

css 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

布局：

<body>
    <h2>
        <span style="--i:1;">H</span>
        <span style="--i:2;">a</span>
        <span style="--i:3;">p</span>
        <span style="--i:4;">p</span>
        <span style="--i:5;">y</span>
        <span style="--i:6; margin-left:5vw;">N</span>
        <span style="--i:7;">e</span>
        <span style="--i:8;">w</span>
        <span style="--i:9; margin-left:5vw;">Y</span>
        <span style="--i:10;">e</span>
        <span style="--i:11;">a</span>
        <span style="--i:12;">r</span>
    </h2>
</body>

样式：

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }
    body{
        color: #fff;
        background-color: #111;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    h2{
        display: flex;
        color: transparent;
        font-size: 10vw;
    }
    h2 span{
        animation: animate 3s linear infinite;
        animation-delay: calc(0.1s* var(--i));
    }
    @keyframes animate{
        0%{
            color: #fff;
            filter: blur(2px) hue-rotate(0deg);
            text-shadow: 0 0 10px #00b3ff,
            0 0 20px #00b3ff,
            0 0 40px #00b3ff,
            0 0 80px #00b3ff,
            0 0 120px #00b3ff,
            0 0 200px #00b3ff,
            0 0 300px #00b3ff,
            0 0 400px #00b3ff;
        }
        30%,70%{
            color: #fff;
            filter: blur(2px) hue-rotate(360deg);
            text-shadow: 0 0 10px #00b3ff,
            0 0 20px #00b3ff,
            0 0 40px #00b3ff,
            0 0 80px #00b3ff,
            0 0 120px #00b3ff,
            0 0 200px #00b3ff,
            0 0 300px #00b3ff,
            0 0 400px #00b3ff;
        }
        100%{
            color: transparent;
            box-shadow: none;
            filter: blur(2px) hue-rotate(0deg);
        }
    }
</style>

查看效果：