📜  Glassmorphism 卡片悬停效果

📅  最后修改于: 2021-10-28 03:18:45             🧑  作者: Mango

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。

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.                 

            
        
    
  


HTML


Javascript


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


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

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.                 

            
        
    
                     

输出: