毛玻璃实现效果

发表于 css3 分类，标签:
28 04月 2022
0

版本信息

作者时间主要变更内容链接
吴惟刚2022年4月28日css 中filter的使用http://wuweigang.com/?id=375

利用css实现毛玻璃效果

利用filter滤镜blur实现毛玻璃效果，毛玻璃效果分以下两种

  • 弹出层为玻璃效果， 页面其他地方清晰

  • 弹出层为清晰效果， 页面其他地方模糊

再有其他的场景，可以通过这两种演化

示例1

弹出层为玻璃效果， 页面其他地方清晰, 如下图：

image.png

此效果主要是给弹出层背景容器，设置 filter: blur(8px)， 注意背景一定要和底层背景完全融合。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            background: url("http://wuweigang.com/zb_users/theme/Inkandwash/style/images/topbg.jpg") 0 0 /100% 100% no-repeat;
        }

        .fd-contain {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 1;
            width: 50%;
            height: 50%;
            line-height: 50vh;
            font-size: 20px;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.5);
            transform: translate(-50%, -50%);
        }


        .fd-contain::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            filter: blur(8px);
            background: rgba(255, 255, 255, 0.5) url("http://wuweigang.com/zb_users/theme/Inkandwash/style/images/topbg.jpg") center center  /200% 200% no-repeat;
        }
    </style>
</head>
<body>
<div class="fd-contain">毛玻璃效果</div>
</body>
</html>


示例2

弹出层为清晰效果， 页面其他地方模糊， 如下图：

image.png

此效果主要是给内容容器，设置 filter: blur(10px)， 注意背景一定要和底层背景完全融合。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body, .fd-contain, .fd-artical {
            width: 100%;
            height: 100%;
        }

        .fd-contain.mask {
            filter: blur(10px);
        }

        .fd-show-popup {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            width: 200px;
            height: 50px;
            font-size: 20px;
            cursor: pointer;
        }

        .fd-popup {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 5;
            width: 400px;
            height: 400px;
            text-align: center;
            font-size: 20px;
            line-height: 60px;
            border: 1px solid #ccc;
            background-color: #fff;
            transform: translate(-50%, -50%);
        }

        .fd-popup h3 {
            border-bottom: 1px solid #ccc;
        }

        .fd-popup.show {
            display: block;
        }

        .fd-operate-contain {
            position: absolute;
            bottom: 20px;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .fd-operate-contain button {
            margin: 0 10px;
            width: 60px;
            height: 30px;
            box-sizing: border-box;
            cursor: pointer;
        }

    </style>
</head>
<body>
<!--主体内容-->
<div class="fd-contain" id="jsContain">
    <button class="fd-show-popup" onclick="showPopup()">显示弹出层</button>
    <iframe  class="fd-artical" src="http://wuweigang.com/" frameborder="0"></iframe>
</div>

<!--弹出层-->
<div class="fd-popup" id="jsPopup">
    <h3>这是弹出层标题 </h3>
    <div>弹出层内容</div>
    <div class="fd-operate-contain">
        <button onclick="hidePopup()">确定</button>
        <button onclick="hidePopup()">取消</button>
    </div>

</div>
<script>
    function showPopup() {
        document.querySelector('#jsContain').classList.add('mask');
        document.querySelector('#jsPopup').classList.add('show');
    }
    function hidePopup() {
        document.querySelector('#jsContain').classList.remove('mask');
        document.querySelector('#jsPopup').classList.remove('show');
    }
</script>
</body>
</html>


0 篇评论

发表我的评论