css实现毛玻璃磨砂效果

news2024/11/19 10:36:45

预览效果
在这里插入图片描述
实现原理：
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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/694436.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！