css实现毛玻璃磨砂效果

爱吃烧鸭蛋的叶安

已于 2023-06-28 10:03:34 修改

阅读量894

点赞数 1

分类专栏： css 文章标签： css 前端

于 2023-06-28 10:03:31 首次发布

本文链接：https://blog.csdn.net/c_qianxia5040/article/details/131430822

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

预览效果
在这里插入图片描述
实现原理：
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
完整代码：

<!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">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: url(https://i.loli.net/2019/11/17/GAYyzeKsiWjP5qO.jpg);
            background-size: cover;
            background-position: center;
        }
        
        .frosted-glass {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 72vw;
            height: 36vh;
            border-radius: 5px;
            box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126), 0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224), 0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(20px);
            transition: 0.5s ease;
        }
        
        .title {
            font-size: 40px;
            font-weight: 300;
            letter-spacing: 0.75em;
            color: #fff;
        }
        
        .frosted-glass:hover {
            box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);
        }
    </style>
    <title>毛玻璃</title>
</head>

<body>
    <div class="frosted-glass">
        <h1 class="title">cherry blossoms</h1>
    </div>
</body>

</html>