SVG排版 | 毛玻璃、磨砂玻璃模板效果
模板效果
模板代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover" />
<title>公众号：懂点君 || 视频号：懂点君 || 微信号：dong_dian_jun</title>
<style type="text/css">*{margin:0;padding:0;}.rich_media_content{overflow:hidden;color:#333;font-size:17px;word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;text-align:justify;position:relative;z-index:0;}.rich_media_content *{max-width:100%!important;box-sizing:border-box!important;-webkit-box-sizing:border-box!important;word-wrap:break-word!important;}</style>
</head>
<body>
<div class="rich_media_content" style="visibility: visible;">
<section style="overflow: hidden">
<!-- 案例效果一 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 850 1275" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQbpoCXFn7Goefz6SUoOt0KjQRSJmeXaDCD4SUiaXTGHHgunNmElNiced07PosnCRKDCV1Gpd3nCUxw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;">
<g data-name="公众号：懂点君 || 视频号：懂点君 || 微信号：dong_dian_jun">
<animate attributeName="opacity" values="1;0;0" begin="click" dur="1s" fill="freeze" keyTimes="0;0.5;1"></animate>
<set attributeName="visibility" from="visible" to="hidden" begin="click+1s"></set>
<foreignObject x="0" y="0" width="100%" height="100%">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 850 1275" style="background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);"></svg>
</foreignObject>
<rect x="0" y="0" width="100%" height="100%" fill="#000" opacity="0" style="pointer-events: visible;"></rect>
</g>
</svg>
<!-- 案例效果二 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 850 567" style="display: block;width: 100%;margin-top: 15px;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQbpoCXFn7Goefz6SUoOt0KcokO6iapAb4Lllibf1zrypfoeiaeV0spmc4BARmG2ZXJAoF0qZiaToxTBg/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;">
<g data-name="公众号：懂点君 || 视频号：懂点君 || 微信号：dong_dian_jun">
<animate attributeName="opacity" values="1;0;0" begin="click" dur="1s" fill="freeze" keyTimes="0;0.5;1"></animate>
<set attributeName="visibility" from="visible" to="hidden" begin="click+1s"></set>
<foreignObject x="0" y="0" width="100%" height="100%">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 850 567" style="background: rgba(0, 0, 0, 0.7);backdrop-filter: blur(7px);-webkit-backdrop-filter: blur(7px);"></svg>
</foreignObject>
<rect x="0" y="0" width="100%" height="100%" fill="#000" opacity="0" style="pointer-events: visible;"></rect>
</g>
</svg>
</section>
</div>
</body>
</html>
强力驱动