毛玻璃效果(CSS)实现

雨夜心锁穿海生

已于 2023-09-09 15:13:59 修改

阅读量2.5k

点赞数 2

分类专栏：前端每日一练文章标签： css 前端 css3

于 2022-09-14 10:38:42 首次发布

本文链接：https://blog.csdn.net/weixin_55285172/article/details/126847928

版权

前端每日一练专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端小demo_day02_毛玻璃效果(CSS)实现

写在前面

前端练习的第二天，今天实现了一个毛玻璃的css效果，重要属性backdrop-filter一起来看看吧!

效果展示

毛玻璃效果展示图

需求来源

依旧是一个抖音人，看到了毛玻璃效果，就来实现以下吧

所用到的组件以及知识储备

子盒子在父盒子中居中显示,将以下代码加入父盒子即可，如果效果没有显示，可以看看是不是父盒子没有设置宽高属性
```
    justify-content: center;
    align-items: center;
    display: flex;
```
backdrop-filter: blur(6px):只需要这一行代码就可以做出毛玻璃的效果
- backdrop-filter：css中的滤镜
- blur：模糊效果
- 6px：模糊度，越大越模糊，我这里用了6px，可以自己F12去调节自己需要的模糊度

实现思路

拿到题目的时候，想都没想就是用透明盒子的阴影，但是忽略了一个问题，就是阴影不透明，并不是我想要的效果，因此在查阅之后，get到了滤镜属性，又学到了一个小知识，开心！

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>day_002_毛玻璃效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 1920px;
            height: 947px;
            justify-content: center;
            align-items: center;
            display: flex;
            background: no-repeat url("bg_image.jpg");
            background-size: cover;
        }

        #main{
            width: 600px;
            height: 300px;
            font-size: 40px;
            border-radius: 50px;
            text-align: center;
            line-height: 300px;
            /*这个玩意儿翻译是背景过滤器，也就是滤镜的意思，给盒子添加滤镜，blur属性就是改变模糊程度，从而达到了毛玻璃的效果*/
            backdrop-filter: blur(6px);
            box-shadow: 300px 300px 100px;
        }
    </style>
</head>
<body>
    <div id="main">毛玻璃效果展示</div>
</body>
</html>