如何使用 HTML 和 CSS 创建聚光灯效果？

在本文中，当我们将鼠标悬停在图像上时，我们将在图像上创建聚光灯效果。这主要基于 HTML、CSS 和 JavaScript。必须遵循以下步骤来创建这种效果。

HTML 部分：在本部分中，我们将为背景图像和鼠标指针创建一个容器元素。 CSS 和 JavaScript 文件也在这里链接。

HTML

  

    
    

  

    
        Hover mouse over the image 
        to get spotlight effect
    
      
    
        
        
    

  

CSS 部分：在此部分中，CSS 用于为我们的 HTML 页面提供不同类型的动画和效果，使其看起来对用户具有交互性。首先重置浏览器效果，然后设置图像和鼠标指针的位置和大小。 filter 属性用于为元素提供视觉效果。 clip-path 属性用于将元素转换为不同类型的形状。

CSS

/* Resetting the browser stylesheet */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #000;
    color: #fff;
}
  
/* Styling the heading */
h1 {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}
  
/* Position the mouse pointer and
    the background image */
.main_box,
.img,
.mouse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
  
.main_box {
    cursor: none;
    margin-top: 3em;
}
  
.img,
.mouse {
    background-image: url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
  
/* Reduce the brightness of the image */
.img {
    filter: brightness(10%);
}
  
/* Make a circle with the clip-path
    property for the spotlight in the effect */
.mouse {
    clip-path: circle(5em at 0, 0);
}

JavaScript 部分：此部分处理网页的交互部分。它使用 offsetX 和 offsetY 属性检测鼠标在图像上的移动，以获取 X 和 Y 坐标。然后使用 clipPath 属性为聚光灯效果创建一个圆圈。

Javascript

// Select the container box and the mouse placeholder
let main = document.querySelector('.main_box');
let mouse = document.querySelector('.mouse');
  
// Add an event listener for detecting
// the movement of the mouse
main.addEventListener('mousemove', 
                      (e) => {
  
  // Use a circle with a clipPath
  // and the offsetX and offsetY property
  mouse.style.clipPath = 
    `circle(10em at ${e.offsetX}px ${e.offsetY}px)`;
});

完整代码：是以上三段代码的组合。

HTML

  

    
        /* Resetting the browser stylesheet */
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            overflow: hidden;
            background-color: #000;
            color: #fff;
        }
  
        /* Styling the heading */
        h1 {
            display: flex;
            align-items: center;
            align-content: center;
            justify-content: center;
        }
  
        /* Position the mouse pointer and
            the background image */
        .main_box,
        .img,
        .mouse {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
          
        .main_box {
            cursor: none;
            margin-top: 3em;
        }
          
        .img,
        .mouse {
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190417124305/250.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
  
        /* Reduce the brightness of the image */
        .img {
            filter: brightness(10%);
        }
  
        /* Make a circle with the clip-path property
            for the spotlight in the effect */
        .mouse {
            clip-path: circle(5em at 0, 0);
        }
    

  

    
        Hover mouse over the image 
        to get spotlight effect
    
      
    
        
        
    
  
    
  
        // Select the container box and the 
        // mouse placeholder
        let main = document.querySelector('.main_box');
        let mouse = document.querySelector('.mouse');
  
        // Add an event listener for detecting
        // the movement of the mouse
        main.addEventListener('mousemove',
            (e) => {
  
                // Use a circle with a clipPath
                // and the offsetX and offsetY property
                mouse.style.clipPath =
        `circle(10em at ${e.offsetX}px ${e.offsetY}px)`;
            });
    

  

输出：