css实现聚光灯特效

最新推荐文章于 2023-03-24 10:31:10 发布
最新推荐文章于 2023-03-24 10:31:10 发布
阅读量568 收藏 3
点赞数 1
分类专栏： 前端基础html,css,js 文章标签： css css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45902401/article/details/121167205
版权

效果

在这里插入图片描述

代码一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html,body{
            width: 100%;
            height: 100%;
        }

        /*图片充满整个界面*/
        #photo{
            width: 100%;
            height: 100%;
            background-image: url("img/11.png");
            background-repeat: no-repeat;
            background-size: cover;
        }

        /*弄一个遮罩*/
        #div1{
            width: 100%;
            height: 100%;
            /*让其脱离文档流*/
            position: absolute;
            /*
            radial-gradient:渐变函数 以一个原型渐变，圆心为鼠标原点，中心是透明，可以看到下面
            图层的颜色,黑色从离圆心10%处开始
            */
            background: radial-gradient(circle at var(--xx) var(--yy),transparent,#000 10%);
        }




    </style>
</head>
<body>

    <div id="div1"></div>
    <div id="photo"></div>

    <script>
        // Document.documentElement 是一个会返回文档对象
        var pos = document.documentElement;
        pos.addEventListener("mousemove",function (e) {
            //在pos中添加属相--xx,--yy,--name，这个--是必填的，css在var()函数取出
            pos.style.setProperty("--xx",e.clientX+"px");
            pos.style.setProperty("--yy",e.clientY+"px");
        });
    </script>
</body>
</html>

代码二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html,body{
            width: 100%;
            height: 100%;
        }

        body{
            background: black;
        }


        #photo{
            width: 100%;
            height: 100%;
            background-image: url("img/11.png");
            background-repeat: no-repeat;
            background-size: cover;
            /*只显示展示的部分，其余的都是下面的图层部分
                以鼠标原点为中心，半径为10%
            */
            clip-path: circle(10% at var(--xx) var(--yy));
        }
        
    </style>
</head>
<body>


    <div id="photo"></div>
    <script>
        //Document.documentElement 是一个会返回文档对象
        var pos = document.documentElement;
        pos.addEventListener("mousemove",function (e) {
            //在pos中添加属相--aa,--bb,--name，这个--是必填的，css在var()函数取出
            pos.style.setProperty("--xx",e.clientX+"px");
            pos.style.setProperty("--yy",e.clientY+"px");
        })
    </script>
</body>
</html>

代码三，升级版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html,body{
            width: 100%;
            height: 100%;
        }

        body{
            background: black;
        }


        #photo{
            width: 100%;
            height: 100%;
            background-image: url("img/11.png");
            background-repeat: no-repeat;
            background-size: cover;
            /*只显示展示的部分，其余的都是下面的图层部分
                以鼠标原点为中心，半径为10%
            */
            clip-path: circle(10% at var(--xx) var(--yy));
        }

        #photo:active{
            clip-path: circle(20% at var(--xx) var(--yy));
        }

    </style>
</head>
<body>


    <div id="photo"></div>
    <script>
        //Document.documentElement 是一个会返回文档对象
        var pos = document.documentElement;
        pos.addEventListener("mousemove",function (e) {
            //在pos中添加属相--aa,--bb,--name，这个--是必填的，css在var()函数取出
            pos.style.setProperty("--xx",e.clientX+"px");
            pos.style.setProperty("--yy",e.clientY+"px");
        })
    </script>
</body>
</html>
涤生啊
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3光束_css3制作流动的光效果练习
weixin_42298128的博客
02-23 1196
菜鸟编程-css3制作流动的光效果练习菜鸟练习代码：css3制作流动的光效果练习*{margin:0px;padding:0px;}#wrap{width:192px;height:350px;margin:40px auto;}#dian{color:gray;font-size:20px;cursor:pointer;}#dian:checked~#liu{animation:oncase ...
HTML5鼠标移动光束粒子动画特效特效代码
03-20
HTML5鼠标移动光束粒子动画特效是一款基于Canvas绘制的酷炫空间穿越光束粒子跟随鼠标移动变化动画特效。
css探照灯效果
晨曦的博客
11-22 303
【代码】css探照灯效果。
CSS+ JS 实现手电筒效果
记得抬头微笑
03-24 868
JavaScript 结合 CSS 打造的一款图片特效，当鼠标拖拽滑块时，让本该置灰的图片局部恢复本来的颜色。且该效果随着你的鼠标的按下时的移动而移动。
前端聚光灯效果-(css-doodle)
热门推荐
weixin_62650212的博客
12-15 1万+
css-doodle 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。下面是一个使用css-doodle库实现的一个聚光灯的效果。效果如下：（点击可以刷新）
纯css3聚光灯下麦克风特效
07-28
纯css3聚光灯下麦克风特效是一款舞台聚光灯下的立体式麦克风图形特效。
css3聚光灯射线旋转动画特效特效代码
03-20
css3聚光灯射线旋转动画特效是一款基于js跟css3制作的夜间聚会模式切换，聚光灯射线旋转，和周围发光灯泡场景动画特效。
css3聚光灯射线旋转动画特效
06-24
css3聚光灯射线旋转动画特效是一款基于js跟css3制作的夜间聚会模式切换，聚光灯射线旋转，和周围发光灯泡场景动画特效。
纯css3聚光灯下麦克风特效.zip
10-09
非常实用的特效代码，可以完美运行，可以二次修改！
css3聚光灯射线旋转动画特效.zip
最新发布
10-14
非常实用好看的特效代码，可以完美运行，可以二次修改！
光束闪过特效
05-10
使用css3实现一束光闪过效果，光束闪过时头和尾无缝连接
css实现光圈发光动画特效
weixin_48885715的博客
11-12 2223
css实现光圈发光动画特效
CSS特效-聚光灯效果
臧小川的博客
09-12 514
<h1 class="h1" data-spotlight="Hello World">Hello World</h1> html { font-size: 15px; } body { padding: 0; margin: 0; background-color: #222; display: flex; justify-content: center; align-...
CSS Div 实现舞台灯光效果
jueshiyaoxian的专栏
12-01 3495
舞台灯光 body{  background-color:#000000; } td{  filter:light; } -->          var g_numlights=0; flttgt.onclick=keyhandler;   //点击鼠标 flttgt.onmousemove=mousehandler; //鼠标移动时
CSS特效1 - 聚光灯效果
weixin_45634433的博客
07-16 221
效果预览 代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <t
【前端】纯CSS实现探照灯效果
接着奏乐接着舞的博客
12-20 1595
以下代码可以复制粘贴，在任何浏览器均可运行。
CSS3实现光束和波浪
findhappy117的博客
01-30 4129
概述 经常在网上看到一些网站做一些波浪和光束的特效，以为是flash实现，看过代码后，突然发现，竟然是css3实现的，太强大了。于是分享这个案例，希望能帮到您。 代码地址如下： http://www.demodashi.com/demo/10150.html
css光影一闪而过 css 色泽效果
szy1000的专栏
12-08 1万+
先看这个css效果。不知道什么时候，这样的css效果小小流行了一把。最早我是在京东看见的。今天在唯品会上面又看见了。 于是按捺不住，我自己也动手写了一个。保存到自己的css库里面，方便日后调用！ 1.先准备一个div。然后准备好一张图片吧，因为图片的展示效果好一点。 Szy1000 2.接下来就全部是CSS的事情了。先给外面的div定好宽高后。一定
css滤镜之light实现的灯光效果.
goosman-lei
03-09 4344
效果图: 源码: 保存为html文件, 在IE6及以上版本IE浏览器可以运行....                                    Light滤镜              div {       width: 400px;       height: 300px;       border: 1px solid gr
css实现文字聚光灯效果
09-09
### 回答1： 要实现文字聚光灯效果，可以使用CSS的radial-gradient属性。这个属性可以创建一个从一个中心点向四周辐射的渐变效果，通过设置透明度，可以实现聚光灯的效果。 以下是一个基本的示例代码，用于创建一个简单的文字聚光灯效果： ```html <div class="spotlight"> <h1>聚光灯效果</h1> </div> ``` ```css .spotlight { background: radial-gradient(circle at center, transparent 100px, #000 120px); display: inline-block; } .spotlight h1 { font-size: 3em; color: #fff; text-align: center; text-shadow: 0 0 10px #000; } ``` 在上面的代码中，我们首先创建了一个容器元素（`<div class="spotlight">`），并将它的背景设置为一个径向渐变。这个径向渐变以圆心为中心，从圆心开始向外辐射，渐变颜色从透明到黑色。透明区域的大小为100px，黑色区域的大小为120px，这个大小可以根据需要进行调整。 接下来，我们设置标题元素（`<h1>`）的样式，包括字体大小、颜色、文本对齐方式和文字阴影。最后，我们将容器元素的`display`属性设置为`inline-block`，使其能够自适应文本大小。 这样，我们就创建了一个简单的文字聚光灯效果。您可以根据需要调整样式，以创建更具有个性化的聚光灯效果。 ### 回答2： 要实现文字聚光灯效果，可以使用CSS的linear-gradient属性和clip-path属性结合来实现。具体步骤如下： 1. 首先，创建一个div容器，并给它设置一个合适的宽度和高度。 2. 使用linear-gradient属性，通过设置背景颜色的渐变来实现聚光灯效果。可以将颜色设置为透明度从0%到100%的渐变，以达到透明度逐渐增强的效果。例如： div { /* 聚光灯渐变效果 */ background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%); } 这样就能实现一个从上到下渐变的聚光灯效果。 3. 使用clip-path属性，来裁剪文本的显示区域。通过设置clip-path属性的值为一个圆形或椭圆形的路径，使得只有路径内的内容显示出来，而路径外的内容被隐藏。例如： div { /* 聚光灯裁剪效果 */ clip-path: circle(50% at 50% 50%); } 这样就能实现一个以div容器中心为圆心的圆形聚光灯效果。 通过上述步骤，我们就可以实现文字聚光灯效果。当然，你也可以根据需求调整渐变颜色、路径形状和位置等来获得不同的效果。 ### 回答3： CSS实现文字聚光灯效果可以通过使用文本阴影和渐变背景来实现。下面是一个简单的步骤： 1. 创建一个包含文字的元素。可以是段落(`<p>`)、标题(`<h1>`等)或其他含有文字的元素。 2. 使用CSS来设置文字的样式。可以设置字体、字号、颜色等。 3. 使用CSS的`text-shadow`属性来创建文字的阴影效果。可以设置阴影的位置、模糊半径和阴影的颜色来实现不同的效果。例如： ``` text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); ``` 这将创建一个白色的阴影效果，模糊半径为10像素。 4. 使用CSS的`background-image`属性来创建文字的渐变背景。可以使用`linear-gradient()`函数来创建线性渐变或者`radial-gradient()`函数来创建径向渐变。例如： ``` background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8)); ``` 这将创建一个从透明到白色的线性渐变背景。 5. 最后，使用其他CSS属性来调整文字的布局、对齐方式和大小等，以达到聚光灯效果的设计要求。 希望以上解答对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值