css实现聚光灯特效

最新推荐文章于 2024-08-30 05:12:30 发布

涤生啊

最新推荐文章于 2024-08-30 05:12:30 发布

阅读量632

点赞数 1

分类专栏：前端基础html,css,js 文章标签： css css3 javascript

本文链接：https://blog.csdn.net/qq_45902401/article/details/121167205

版权

前端基础html,css,js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了一种通过JavaScript和CSS实现的动态图片裁剪效果。通过监听鼠标移动事件，改变遮罩层的位置，使得图片下方的背景仅显示鼠标周围的一小部分，从而创造出有趣的视觉体验。代码分为三个版本，从基础的图片遮罩到鼠标悬停时增加裁剪区域的升级版，逐步解析了实现过程。

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

效果

在这里插入图片描述

代码一

<!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>