毛玻璃实现效果

发表于 css3 分类,标签:

版本信息

作者时间主要变更内容链接
吴惟刚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 篇评论

发表我的评论