Эффект наведения карты Glassmorphism

Опубликовано: 30 Ноября, 2021

Глассморфизм - это современный способ стилизовать веб-элементы любой веб-страницы и обеспечить как трехмерный, так и стеклянный эффект. Этот эффект анимации можно легко создать с помощью HTML, CSS и Vanilla-tilt JS. Мы можем реализовать Glassmorphism, используя различные свойства CSS. Он используется для добавления эффекта стекла к данному элементу, а Vanilla-tilt JS используется для создания эффекта наклона для карты.

Монтаж:

Прежде чем двигаться дальше, сначала мы должны установить модуль vanilla-tilt, выполнив следующую команду в каталоге вашего проекта с помощью терминала в папке SRC, или вы также можете запустить эту команду в терминале Visual Studio Code в папке вашего проекта. .
```
 npm установить vanilla-tilt
```

Vanilla-tilt JS также можно использовать с его CDN.
https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js

HTML-код: В этом разделе мы сделаем макет карты.

index.html

HTML

<!DOCTYPE html>
<html>
  
<body>
    <div class="gfg">
        <div class="card">
            <div class="content">
                <h2>GeeksforGeeks</h2>
                <h3>Welcome</h3>
                <p>
                    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.
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>

Код CSS: в этом разделе мы будем использовать некоторые свойства CSS для разработки карты.

index.css

HTML

 < style >
    *{
        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;
       
    }
 </ style > 

Код JavaScript: в этом разделе мы будем использовать JS Vanilla-tilt, чтобы обеспечить эффект наклона для карты.

script.js

Javascript

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

Полный код: в этом разделе мы объединим три вышеупомянутых раздела, чтобы создать эффект стекломорфизма.

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < meta charset = "utf-8" >
    < style >
        *{
            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;
        }
    </ style >
 </ head >
 
< body >
    < div class = "gfg" >
        < div class = "card" >
            < div class = "content" >
                < h2 >GeeksforGeeks</ h2 >
                < h3 >Welcome</ h3 >
                < p >
                    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.
                </ p >
            </ div >
        </ div >
    </ div >
    < script src = "vanilla-tilt.js" >
    </ script >
     
    < script >
        VanillaTilt.init(document.querySelector(".card"), {
          max: 40,
          speed: 800,
          glare: true,
          "max-glare": 2.5,
        });
    </ script >
 </ body >
   
</ html > 

Выход:

Technical Scripter JavaScript JQuery HTML CSS-Misc HTML-Misc JavaScript-Misc CSS

Эффект наведения карты Glassmorphism

HTML

HTML

Javascript

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ