📌  相关文章
📜  如何使用 HTML CSS 和 jQuery 创建跟随效果?

📅  最后修改于: 2021-11-03 10:16:46             🧑  作者: Mango

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

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

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

标签中的
标签。



  

    
    
  
    Split Effect

  

    
        
    
  

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


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


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



  

    
    
  
    Split Effect
  
    
  
    

  

    
        
    
          

输出: