HTML+CSS：聚光灯移动~文字特效

最新推荐文章于 2024-08-17 14:58:02 发布

X-SL

最新推荐文章于 2024-08-17 14:58:02 发布

阅读量272

点赞数

分类专栏：炫酷特效文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_40924992/article/details/131388698

版权

炫酷特效专栏收录该内容

7 篇文章 1 订阅

订阅专栏

文章目录

先上效果：

HTML+CSS：聚光灯文字特效

技术难点

1.clip-path属性：是通过定义裁剪区域来决定目标元素哪个区域可见，哪个区域不可见。通过移动裁剪区域，就可以得到聚光灯移动的效果。

HTML代码演示：

<body>
    <h1>美香一家还好吗？</h1>
</body>

CSS代码演示：

<style>
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
    }
    body{
        height:100vh;
        display:flex;
        justify-content:center;
        align-items:center;
        background-color:rgba(0,0,0,0.99);
    }
    h1{
        position:relative;
        color:rgba(37, 32, 32, 0.4);
        font-size:50px;
    }
    h1::after{
        content:"美香一家还好吗？";
        position:absolute;
        top:0;
        left:0;
        color:transparent;
        background-image:linear-gradient(to left,rgb(26, 11, 230),rgb(152, 233, 23),rgb(226, 35, 169),rgb(71, 199, 231),rgb(136, 145, 19));
        background-clip:text;
        -webkit-background-clip:text;
        clip-path:circle(80px at 0% 50%);
        animation:move 3s linear alternate infinite;
    }
    @keyframes move{
       0%{
        clip-path:circle(60px at 0% 50%);
       }
       100%{
        clip-path:circle(60px at 100% 50%);
       }
    }
   </style>