特效描述：透明毛玻璃 面板遮罩。基于svg绘制网页界面上悬浮透明的毛玻璃面板，半透明的玻璃层遮罩背景特效。
代码结构
1. 引入CSS
<link rel="stylesheet" type="text/css" href="css/demo.css"> <link rel="stylesheet" type="text/css" href="css/loading.css"> <link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/demo.css"> <link rel="stylesheet" type="text/css" href="css/loading.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
2. 引入JS
<script src="./js/app.js"></script> <script src="./js/app.js"></script>
3. HTML代码
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body space-top-bot="50px"> <div class="page-loading__icon"></div> <div class="frosted-panel" panel-dimensions="80% 60%" breakpoint-type="min-width" breakpoints="600px 80% 80%, 1200px 60% 500px"> <svg> <filter id="blurMe" filterRes="1200" color-interpolation-filters="sRGB"> <feGaussianBlur in="SourceGraphic" stdDeviation="7" /> </filter> <image xlink:href="./img/bg1.jpg" x="0" y="0" width="2880" height="1620" filter="url(#blurMe)" /> </svg> <div class="content" content-margin="5px"> <!-- ALL PANEL CONTENT GOES HERE --> <!-- .flex-container is for demo purposes only --> <div class="flex-container"> <span class="wh">80% 60%</span> <span class="wh">80% 80%</span> <span class="wh">这里是文字内容</span> </div> </div> </div> </body> </html>
