前端小demo_day02_聚光灯(CSS)实现

最新推荐文章于 2024-07-18 16:51:41 发布

雨夜心锁穿海生

最新推荐文章于 2024-07-18 16:51:41 发布

阅读量200

点赞数

分类专栏：前端每日一练文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_55285172/article/details/126890152

版权

前端每日一练专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了使用CSS创建聚光灯效果的步骤和代码实现。通过设置背景颜色渐变、clip-path属性以及动画，模拟灯光从左至右扫过文本的动态效果。主要涉及的关键技术包括radial-gradient、-webkit-background-clip、color透明和clip-path动画。

摘要由CSDN通过智能技术生成

前端小demo_day02_聚光灯(CSS)实现

写在前面

前端练习的第三天，今天实现了一个聚光灯的效果，看到这个效果的第一眼的时候，就感觉会用到我们第一天学习到的一个新属性clip-path
，一起来实现以下吧

效果展示

聚光灯效果

需求来源

前端常用css样式实现，作为练习使用

所用到的组件以及知识储备

如何修改字体颜色渐变

/*设置背景颜色渐变*/
background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
/*背景切片：按照div的文字来裁剪背景*/
-webkit-background-clip: text;
/*字体颜色更改为透明，字体透明之后才能显示出现背景的颜色，以此来作用到文字上*/
color: transparent;

切割图片clip-path属性

表示用圆形去分割组件，达到隐藏和显示的效果，例如开始的时候我们设置在最左边，那么在比例之外的其它部分都将被隐藏

/*0%表示全部隐藏，用圆形切割的半径大小是总站比的0%，20%和50%是用来定位的，20%定位圆心的x坐标，50%定位圆心的y坐标*/
clip-path: circle(0% at 20% 50%);

实现思路

首先放置一个盒子，使其背景是灰色，用来表示当前是没有灯光照射的部分，刚开始肯定就是全部无灯光照射啦!

其次就是利用这个盒子的::before或者::after，设置一个相同的背景，是彩色渐变的，
默认是隐藏的，然后就是添加我们的clip-path了，用圆形切片来模拟灯光部分，有了思路就来实现以下试试吧！

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>day_003_聚光灯</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            align-items: center;
            justify-content: center;
            display: flex;
            min-height: 100vh;
        }

        #main{
            position: relative;
            font-size: 80px;
            /*增加字体间距*/
            /*letter-spacing: 5px;*/
            color: gray;
        }

        #main::after{
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
            content: "Hello World";
            background: radial-gradient(circle, rgba(63,94,251,1) 0%, rgba(252,70,107,1) 100%);
            -webkit-background-clip: text;
            color: transparent;
            clip-path: circle(10% at 0% 50%);
            animation: spotlight 4s infinite;
        }

        @keyframes spotlight {
            0%{
                clip-path: circle(10% at 0% 50%);
            }
            50%{
                clip-path: circle(10% at 100% 50%);
            }
            100%{
                clip-path: circle(10% at 0% 50%);
            }
        }
    </style>
</head>
<body>
    <h1 id="main">
        Hello World
    </h1>
</body>
</html>