文单阅读

<!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>HTML5 背景图片毛玻璃模糊特效</title>

    <link rel="stylesheet" type="text/css" href="demo.css">
    <link rel="stylesheet" type="text/css" href="loading.css">
    <link rel="stylesheet" type="text/css" href="main.css">

</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>

<script src="app.js"></script>



</body>
</html>
15323441764我微电