灯泡字

最新推荐文章于 2024-01-03 08:28:14 发布

我就吃辣的

最新推荐文章于 2024-01-03 08:28:14 发布

阅读量123

点赞数

分类专栏：动画

本文链接：https://blog.csdn.net/qq_43144059/article/details/113618250

版权

动画专栏收录该内容

5 篇文章 0 订阅

订阅专栏

灯泡字

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灯泡字</title>

    <style>
        body {
            display: flex;
            justify-content: center;
            background-color: rgb(60, 60, 70);
        }

        .box {
            position: relative;
            top: 200px;
            font: 900 100px "";
            color: #333;
            cursor: pointer;
        }

        .box span {
            transition: all 0.5s linear calc(var(--i)*.1s);
        }

        .box:hover {
            color: #fff;
            text-shadow: 0 0 10px #fff,
                0 0 20px #fff,
                0 0 30px #fff,
                0 0 50px #fff,
                0 0 60px #fff,
                0 0 80px #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <span style="--i:1">L</span>
        <span style="--i:2">u</span>
        <span style="--i:3">W</span>
        <span style="--i:4">e</span>
        <span style="--i:5">n</span>
        <span style="--i:6">T</span>
        <span style="--i:7">i</span>
        <span style="--i:8">n</span>
        <span style="--i:9">g</span>
    </div>
</body>

</html>