📜  使用 HTML 和 CSS 将发光效果应用于图像

📅  最后修改于: 2021-10-29 04:41:02             🧑  作者: Mango

在浏览大多数网站时,您会看到一些特殊效果,将光标放在各种图像上时可以看到这些效果。因此,在本文中,我们将实现相同的功能。我们可以将此类图像用作我们网站的卡片。

在本文中,您将学习如何将发光效果应用于特定图像,当您将光标放在它上面时,您将看到该效果。我们将使用HTMLCSS来实现它。提供了一个示例视频,以更清楚地了解您将在本文中开发的内容。

分步实施

第 1 步:图片的 HTML 代码:

HTML

  GeeksForGeeks Glowling Card

     


HTML


HTML


  

  
    

  

  
    
    

        GeeksForGeeks Glowling Card     

    
                      
     


第 2 步:使用 CSS 设置图像样式:

现在,我们将应用一些 CSS 属性来装饰图像并修复它在网页上的位置。关键是当用户将光标放在图像上时,使用 CSS的 box-shadow 属性使图像发光。这是提供给您帮助的内部 CSS 代码。

HTML


例子:

此示例使用box-shadow属性将发光效果应用于图像。您可以根据自己的喜好更改背景发光颜色。

HTML



  

  
    

  

  
    
    

        GeeksForGeeks Glowling Card     

    
                      
     

这就是本文的全部内容。这是上述代码的输出视频。

输出: