CSS聚光灯效果制作

最新推荐文章于 2024-02-25 12:10:27 发布

无知的圆

最新推荐文章于 2024-02-25 12:10:27 发布

阅读量259

点赞数

分类专栏： HTML&CSS 前端文章标签： html css css3 html5

本文链接：https://blog.csdn.net/qq_45904930/article/details/114323144

版权

前端同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

HTML&CSS

6 篇文章 0 订阅

订阅专栏

原理

将两个文字完全重合【一前一后】，同时设置两种不同的颜色【一个底色和一个要展示的颜色，】，然后再将前面的文字套用圆形遮罩，最后加上CSS Animation即可

可以加入背景图片，然后将文字作为遮罩

代码

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>web-study</h1>
</body>
</html>

html{
    font-size: 15px;
}
body{
    background-color: #222;
    display: flex;
    
    /*使文字上下左右居中*/
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
h1{
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 8rem;
    position: relative;
}
/*利用伪类元素制作第二层文字*/
h1::after{
    content: "web-study";
    color: transparent;
    position: absolute;
    top:0;
    left: 0;
    -webkit-clip-path: ellipse(100px 100px at 0% 50%);/*画一个100px的正圆形，位置在水平的最左，垂直的中间,同时为了避免不兼容，加上-webit-*/
    clip-path: ellipse(100px 100px at 0% 50%);/*记得保留原来的属性*/ 
    animation: spotlight 5s infinite;
    background-image: url(https://images.unsplash.com/photo-1579547621869-0ddb5f237392?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);
    background-size: 150%;
    background-position: center center;
    -webkit-background-clip: text;
    background-clip: text;
}
@keyframes spotlight{
    /*设定聚光灯在最左*/
    0%{
    -webkit-clip-path: ellipse(100px 100px at 0% 50%);/*画一个100px的正圆形，位置在水平的最左，垂直的中间,同时为了避免不兼容，加上-webit-*/
    clip-path: ellipse(100px 100px at 0% 50%);/*记得保留原来的属性*/ 
    }
    /*设置聚光灯移到最右*/
    50%{
        -webkit-clip-path: ellipse(100px 100px at 100% 50%);/*画一个100px的正圆形，位置在水平的最左，垂直的中间,同时为了避免不兼容，加上-webit-*/
    clip-path: ellipse(100px 100px at 100% 50%);/*记得保留原来的属性*/ 
    }
    /*设定聚光灯回到最左边*/
    100%{
    -webkit-clip-path: ellipse(100px 100px at 0% 50%);/*画一个100px的正圆形，位置在水平的最左，垂直的中间,同时为了避免不兼容，加上-webit-*/
    clip-path: ellipse(100px 100px at 0% 50%);/*记得保留原来的属性*/ 
    }
}

无知的圆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS聚光灯效果制作

原理将两个文字完全重合【一前一后】，同时设置两种不同的颜色【一个底色和一个要展示的颜色，】，然后再将前面的文字套用圆形遮罩，最后加上CSS Animation即可可以加入背景图片，然后将文字作为遮罩代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed
复制链接

扫一扫