服务器之家
您的位置： 首页 编程语言 css

使用CSS实现聚光灯效果

648人浏览   2023-10-23 14:52:53

效果:

  • 所有代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: #485460;
        }

        .text {
            font-size: 120px;
            position: relative;
            color: #84817a;
        }

        .text::after {
            content: attr(data-content);
            position: absolute;
            left: 0;
            top: 0;

            /* 设置背景渐变颜色 */
            background-image: linear-gradient(90deg, #ff5252, #ff793f, #33d9b2);

            /*  背景裁切, 让它只有在文字区域才有背景 */
            -webkit-background-clip: text;
          	background-clip: text;

            /* 取消掉文字的颜色 */
            color: transparent;

            /* 
                x轴半径, y轴半径, at 圆心坐标
                让它只显示部分大小, 也就是聚光灯的所照的位置
                240正好是两个字的宽度
            */
            clip-path: ellipse(240px 120px at 0% 50%);

            /* 
                上面固定了显示区域, 现在就是让显示的区域左右移动即可
            */
            animation: move 2s linear infinite alternate;
        }

        @keyframes move {
            to {
                /* 到终点 */
                clip-path: ellipse(240px 120px at 100% 50%);
            }
        }
    </style>
</head>

<body>
    <div class="text" data-content="一个爬坑的Coder">
        一个爬坑的Coder
    </div>
</body>

</html>

相关推荐