Glassmorphism 卡片悬停效果

Glassmorphism是一种现代方式，可以为任何网页的网页元素设计样式并提供 3D 和玻璃效果。使用 HTML、CSS 和 Vanilla-tilt JS 可以轻松生成这种动画效果。我们可以使用各种 CSS 属性来实现 Glassmorphism。它用于为给定元素添加玻璃效果，Vanilla-tilt JS 用于为卡片提供倾斜效果。

安装：

• 在继续之前，首先我们必须安装 vanilla-tilt 模块，通过在项目目录中运行以下命令，在 SRC 文件夹中的终端的帮助下，或者您也可以在项目文件夹中的 Visual Studio Code 终端中运行此命令.

  npm install vanilla-tilt

• Vanilla-tilt JS 也可以使用它的 CDN。

  https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js

HTML 代码：在本节中，我们将制作卡片的布局。

索引.html

HTML

  

    

        

            

                
GeeksforGeeks
                
Welcome
                

                    Learn Data Structures Online At 
                    Your Own Pace With The Best Of 
                    Faculty In The Industry. The Best 
                    Data Structures Course Available
                    Online From Skilled And Experienced 
                    Faculty.
                
            
        
    

  

CSS 代码：在本节中，我们将使用一些 CSS 属性来设计卡片。

索引文件

HTML

JavaScript 代码：在本节中，我们将使用 Vanilla-tilt JS 为卡片提供倾斜效果。

脚本.js

Javascript

    VanillaTilt.init(document.querySelector(".card"), {
        max: 40,
        speed: 800,
        glare:true,
        "max-glare":2.5,
    });

完整代码：在本节中，我们将结合以上三个部分来创建一个 Glassmorphism Effect。

HTML

  

    
    
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            
        }
  
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: green;
        }
  
        .gfg{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 1000px;
            flex-wrap: wrap;
            z-index: 1;
        }
           
        .gfg .card{
            position: relative;
            width: 300px;
            height: 300px;
            margin: 60px;
            box-shadow: 20px 20px 50px rgb(0,0,0,0.4);
            border-radius: 15px;
            background: rgba(255,255,255,0.1);
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(6px);
        }
  
        .gfg .card .content{
            padding: 40px;
            text-align: center;
        }
    

  

    
        
            
                GeeksforGeeks
                Welcome
                
                    Learn Data Structures Online At Your 
                    Own Pace With The Best Of Faculty In 
                    The Industry. The Best Data Structures 
                    Course Available Online From Skilled 
                    And Experienced Faculty.
                
            
        
    
    
    
      
    
        VanillaTilt.init(document.querySelector(".card"), {
          max: 40,
          speed: 800,
          glare: true,
          "max-glare": 2.5,
        });
    

    

输出：