如何使用 HTML CSS 和 jQuery 创建跟随效果？

跟随聚光灯效果(spotlight effect)是一种可以使用jQuery轻松实现的效果。这种效果对于任何网站的开场或正面横幅设计都非常受欢迎。

方法：方法是使用jQuery提供的mousemove()函数，在鼠标移动效果上使用圆形CSS。

HTML 代码： HTML 代码用于设计主体的基本结构。在本节中，我们将使用包裹在

标签中的

标签。

CSS 代码： CSS 属性用于设置图像的样式。

jQuery 代码：我们使用 mousemove()函数来跟踪鼠标移动并根据光标移动应用效果。要创建一个圆，只需使用径向渐变以及基本上是光标位置的 X 和 Y 点，并为圆度提供 30% 的半径。不要忘记将此 CSS 应用于 div 标签。

    $(document).mousemove(function (e) {
        var X = e.pageX;
        var Y = e.pageY;
        $(".geeks").css(
            "background",
            "radial-gradient(circle at " +
            X +
            "px " +
            Y +
            "px, transparent, #000 30%)"
        );
    });

完整代码：在他的部分中，我们将结合上述三组代码(HTML、CSS 和 jQuery)来创建一个跟随点效果。

  

    
    
  
    Split Effect
  
    
    
  
    
        body {
            margin: 0;
            padding: 0;
        }
  
        section {
            background: url(
https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png);
            position: relative;
            width: 100%;
            height: 100vh;
            background-size: cover;
        }
  
        .geeks {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    

  

    
        
    
  
    
        $(document).mousemove(function (e) {
            var X = e.pageX;
            var Y = e.pageY;
            $(".geeks").css(
                "background",
                "radial-gradient(circle at " +
                X +
                "px " +
                Y +
                "px, transparent, #000 30%)"
            );
        });
    

  

输出：