自学前端之CSS实现毛玻璃效果

我们知道，页面中有一种非常好看的效果就是毛玻璃，我们先看一下效果图
在这里插入图片描述
接下来我们就具体实现一下这个效果
先看HTML
在body中设置一张背景图片
然后设置一个div，用来作为卡片，也是我们需要的毛玻璃的载体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>野犬17--毛玻璃</title>
    <link rel="stylesheet" type="text/css" href="./GroundGrassStyle.css">
</head>
<body background="resources/background.png">
    <div class="card">
        <h2>这是一个毛玻璃卡片</h2>
    </div>
</body>
</html>

然后来看CSS


body
{
    
    
    /*设置布局*/
    display:flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

}

.card
{
    
    
    /*设置布局*/
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /*设置card的大小*/
    width: 980px;
    height:600px;

    /*设置阴影*/
    box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
    /*设置圆角*/
    border-radius:15px;
    /*设置上边界和左边界亮纹，使card有一种层次感*/
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left: 1px solid rgba(255,255,255,0.5);

    /*设置背景样式*/
    background: rgba(255,255,255,0.1);
    /*让透过card的底部元素模糊化,达到毛玻璃效果*/
    backdrop-filter: blur(5px);
}

/*简单设置以下card中字体样式*/
.card h2
{
    
    
    position: relative;
    font-size: 3em;
    color: rgba(255, 255, 255, 0.15);
}

这么依赖，就实现了简单的毛玻璃效果。
其中的关键就在于backdrop-filter: blur(5px)，它的作用是让透过该层的底部元素模糊化,blur的作用是设置模糊距离，数值越大，就越模糊，反之则会更清晰。

自学前端之CSS实现毛玻璃效果

猜你喜欢