案例拆解
- 第1步 - 实现毛玻璃效果
- 第2步 - 实现点击拍照效果
- 第3步 - 毛玻璃与拍照相结合
- 第4步 - 实现宽屏点击展开长图
- 第5步 - 拍照与展开长图结合
- 第6步 - 效果代码优化
第1步 - 实现毛玻璃效果
毛玻璃相关文章推荐，点击请看
代码语言：javascript复制<!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>公众号：懂点君 || 视频号：懂点君</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;" data-author="dong_dian_jun | 懂点君">
<!-- 背景图在url里面 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;">
<foreignObject x="0" y="0" width="100%" height="100%">
<!-- 毛玻璃遮罩层 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(5px);pointer-events: none;"></svg>
</foreignObject>
</svg>
</div>
</body>
</html>第2步 - 实现点击拍照效果
实现拍照效果的过程：默认显示的照片淡出——显示白色矩形区域——白色矩形区域淡出——显示拍照后的图片
案例代码中有两个动画，一个动画是控制图片淡出，另外一个是控制白色矩形区域淡出（该动画延迟触发，才有闪一下的效果）
<!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>公众号：懂点君 || 视频号：懂点君</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;" data-author="dong_dian_jun | 懂点君">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-tap-highlight-color: transparent;user-select: none;">
<g data-name="拍照后">
<foreignObject x="0" y="0" width="1080" height="1500">
<svg style="display: block;margin-top: -1px;width: 100%;background: #3df center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;" viewBox="0 0 1080 1500">
<g data-name="文字提示">
<text transform="translate(540 750)" fill="#fff" font-size="110px" font-weight="bold" style="text-anchor: middle">拍照后</text>
</g>
</svg>
</foreignObject>
</g>
<g data-name="拍照前">
<rect x="0" y="0" width="1080" height="1500" fill="#ffffff" style="pointer-events: none;"></rect>
<animate attributeName="opacity" begin="click 0.3s" dur="0.05s" values="1;0;" fill="freeze" restart="never"></animate>
<g data-name="图片容器">
<foreignObject x="0" y="0" width="1080" height="1500">
<!-- 这个可以替换成图片 -->
<svg style="display: block;margin-top: -1px;width: 100%;background: #39f center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;" viewBox="0 0 1080 1500">
<g data-name="文字提示">
<text transform="translate(540 750)" fill="#fff" font-size="110px" font-weight="bold" style="text-anchor: middle">快拍我</text>
</g>
<!-- 点击区域一定要保留，不然触发不了 -->
<g data-name="点击区域">
<rect x="0" y="0" width="1080" height="1500" opacity="0" style="pointer-events: visible;"></rect>
<set attributeName="visibility" from="visible" to="hidden" begin="click" dur="1.7s" fill="freeze" restart="never"></set>
</g>
</svg>
</foreignObject>
<animate attributeName="opacity" begin="click" dur="0.05s" values="1;0;" fill="freeze" restart="never"></animate>
</g>
</g>
</svg>
</div>
</body>
</html>第3步 - 毛玻璃与拍照相结合
将拍照前的图片换成毛玻璃，拍照后的换成图片
<!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>公众号：懂点君 || 视频号：懂点君</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;" data-author="dong_dian_jun | 懂点君">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-tap-highlight-color: transparent;user-select: none;">
<g data-name="拍照后">
<foreignObject x="0" y="0" width="1080" height="1500">
<!-- 这里换成图片了 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtTESymUAFxyxyo7Z6sIu6atVKSs42RAdcz5qCLBwrMenqJTooZaCSbeA/0?wx_fmt=png) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;"></svg>
</foreignObject>
</g>
<g data-name="拍照前">
<rect x="0" y="0" width="1080" height="1500" fill="#ffffff" style="pointer-events: none;"></rect>
<animate attributeName="opacity" begin="click 0.3s" dur="0.05s" values="1;0;" fill="freeze" restart="never"></animate>
<g data-name="图片容器">
<foreignObject x="0" y="0" width="1080" height="1500">
<!-- 这里换成毛玻璃了 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;">
<foreignObject x="0" y="0" width="100%" height="100%">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(5px);pointer-events: none;"></svg>
</foreignObject>
<!-- 点击区域一定要保留，不然触发不了 -->
<g data-name="点击区域">
<rect x="0" y="0" width="1080" height="1500" opacity="0" style="pointer-events: visible;"></rect>
<set attributeName="visibility" from="visible" to="hidden" begin="click" dur="1.7s" fill="freeze" restart="never"></set>
</g>
</svg>
</foreignObject>
<animate attributeName="opacity" begin="click" dur="0.05s" values="1;0;" fill="freeze" restart="never"></animate>
</g>
</g>
<!-- 这个是引导大家点击 -->
<g data-name="引导点击">
<circle opacity="0.3" fill="#fff" cx="540" cy="750" r="33" style="pointer-events: none;">
<animate attributeName="r" values="35;32;35" begin="0s" dur="0.5s" repeatCount="indefinite"></animate>
</circle>
<circle fill="#fff" cx="540" cy="750" r="22" style="pointer-events: none;">
<animate attributeName="opacity" values="1;0.5;1" begin="0s" dur="0.5s" repeatCount="indefinite"></animate>
</circle>
</g>
</svg>
</div>
</body>
</html>第4步 - 实现宽屏点击展开长图
展开长图的效果非常常见了，原理就是用动画去改变SVG的宽度（SVG的CSS需要设置max-width: none!important;，否则宽度无法变大），SVG宽度不断的变大，它的高度也就同等比例的变高，你可以把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>公众号：懂点君 || 视频号：懂点君</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;weixin: dong_dian_jun;">
<section style="overflow: hidden; font-size: 0px;">
<!-- 内容区域 -->
<section style="height: 0;" data-author="dong_dian_jun | 懂点君">
<!-- 长图内容 -->
<svg style="display: block;margin-top: -1px;width: 100%;background: #008C8C center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;" viewBox="0 0 1080 3000">
<g data-name="文字提示">
<text transform="translate(540 750)" fill="#fff" font-size="110px" font-weight="bold" style="text-anchor: middle">长图模块</text>
</g>
</svg>
</section>
<!-- 展开区域 -->
<section style="line-height: 0px;font-size: 0px;pointer-events: none;transform: scale(1);">
<!-- 触发层 -->
<svg width="100%" viewBox="0 0 1080 1500" style="display: inline-block;pointer-events: none;-webkit-tap-highlight-color: transparent;user-select: none;vertical-align: top;min-width: 100% !important;max-width: none!important;">
<rect x="0" y="0" width="1080" height="1500" fill="yellow" opacity="0" style="pointer-events: visiblePainted;">
<set attributeName="visibility" from="visible" to="hidden" begin="click" dur="1.7s" fill="freeze" restart="never"></set>
</rect>
<!-- 展开动画【修改展开长度】 -->
<animate attributeName="width" fill="remove" restart="always" calcMode="spline" keySplines="0.52 0 0.48 1.0;0.52 0 0.48 1.0" keyTimes="0; 0.002; 1" values="100%; 200%; 200%" dur="1000s" begin="click">
</animate>
</svg>
</section>
</section>
</div>
</body>
</html>第5步 - 拍照与展开长图结合
在展开区域里面结合拍照的效果，展开区域宽度变大时，需要用动画控制展开区域淡出，因为展开区域宽度变大了，里面的图片也会随之变大，这不是我们想要的结果，因此需要隐藏起来。
用CSS3实现了图片的滤镜效果。
代码语言：javascript复制<!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>公众号：懂点君 || 视频号：懂点君</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;weixin: dong_dian_jun;">
<section style="overflow: hidden; font-size: 0px;">
<!-- 内容区域 -->
<section style="height: 0;" data-author="dong_dian_jun | 懂点君">
<!-- 长图内容 -->
<!-- 图片滤镜均用CSS3实现 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-filter: saturate(7); filter: saturate(7);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-filter: contrast(180%);filter: contrast(180%);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-filter: invert(100%);filter: invert(100%);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-filter: sepia(100%);filter: sepia(100%);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-filter: opacity(50%);filter: opacity(50%);"></svg>
</section>
<!-- 展开区域 -->
<section style="line-height: 0px;font-size: 0px;pointer-events: none;transform: scale(1);">
<!-- 触发层 -->
<svg width="100%" viewBox="0 0 1080 1500" style="display: inline-block;pointer-events: none;-webkit-tap-highlight-color: transparent;user-select: none;vertical-align: top;min-width: 100% !important;max-width: none!important;">
<g data-name="拍照后">
<foreignObject x="0" y="0" width="1080" height="1500">
<!-- 这里换成图片了 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-filter: saturate(7); filter: saturate(7);"></svg>
</foreignObject>
</g>
<g data-name="拍照前">
<rect x="0" y="0" width="1080" height="1500" fill="#ffffff" style="pointer-events: none;"></rect>
<animate attributeName="opacity" begin="click 0.3s" dur="0.05s" values="1;0;" fill="freeze" restart="never"></animate>
<g data-name="图片容器">
<foreignObject x="0" y="0" width="1080" height="1500">
<!-- 这里换成毛玻璃了 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;">
<foreignObject x="0" y="0" width="100%" height="100%">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(5px);pointer-events: none;"></svg>
</foreignObject>
<!-- 点击区域一定要保留，不然触发不了 -->
<g data-name="点击区域">
<rect x="0" y="0" width="1080" height="1500" opacity="0" style="pointer-events: visible;"></rect>
<set attributeName="visibility" from="visible" to="hidden" begin="click" dur="1.7s" fill="freeze" restart="never"></set>
</g>
</svg>
</foreignObject>
<animate attributeName="opacity" begin="click" dur="0.05s" values="1;0;" fill="freeze" restart="never"></animate>
</g>
</g>
<!-- 这个是引导大家点击 -->
<g data-name="引导点击">
<circle opacity="0.3" fill="#fff" cx="540" cy="750" r="33" style="pointer-events: none;">
<animate attributeName="r" values="35;32;35" begin="0s" dur="0.5s" repeatCount="indefinite"></animate>
</circle>
<circle fill="#fff" cx="540" cy="750" r="22" style="pointer-events: none;">
<animate attributeName="opacity" values="1;0.5;1" begin="0s" dur="0.5s" repeatCount="indefinite"></animate>
</circle>
<text transform="translate(540 1000)" fill="#fff" font-size="110px" font-weight="bold" style="text-anchor: middle">快拍我</text>
</g>
<!-- 展开动画【修改展开长度】 -->
<animate attributeName="width" fill="remove" restart="always" calcMode="spline" keySplines="0.52 0 0.48 1.0;0.52 0 0.48 1.0" keyTimes="0; 0.002; 1" values="100%; 600%; 600%" dur="1000s" begin="click 1s"></animate>
<!-- 隐藏展开区域的内容 -->
<animate attributeName="opacity" begin="click 1s" dur="0.05s" values="1;0;" fill="freeze" restart="never"></animate>
</svg>
</section>
</section>
</div>
</body>
</html>第6步 - 效果代码优化
优化两个地方，一个是拍照后的图片删除掉，一个是引导点击放置在点击区域里面。因为长图里面有拍照后的图片了，这边就不需要重复设置了。点击之后是想让引导点击的提示隐藏起来，所以放置在点击触发里面了。
代码语言：javascript复制<!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>公众号：懂点君 || 视频号：懂点君</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;weixin: dong_dian_jun;">
<section style="overflow: hidden; font-size: 0px;-webkit-tap-highlight-color: transparent;user-select: none;">
<!-- 内容区域 -->
<section style="height: 0;" data-author="dong_dian_jun | 懂点君">
<!-- 长图内容 -->
<!-- 图片滤镜均用CSS3实现 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;margin-top: -1px;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-filter: contrast(180%);filter: contrast(180%);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;margin-top: -1px;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-filter: saturate(7); filter: saturate(7);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;margin-top: -1px;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;margin-top: -1px;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-filter: invert(100%);filter: invert(100%);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;margin-top: -1px;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-filter: sepia(100%);filter: sepia(100%);"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;margin-top: -1px;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;-webkit-filter: opacity(50%);filter: opacity(50%);"></svg>
</section>
<!-- 展开区域 -->
<section style="line-height: 0px;font-size: 0px;pointer-events: none;transform: scale(1);">
<!-- 触发层 -->
<svg width="100%" viewBox="0 0 1080 1500" style="display: inline-block;pointer-events: none;-webkit-tap-highlight-color: transparent;user-select: none;vertical-align: top;min-width: 100% !important;max-width: none!important;">
<!-- 在这里删除了拍照后 -->
<g data-name="拍照前">
<rect x="0" y="0" width="1080" height="1500" fill="#ffffff" style="pointer-events: none;"></rect>
<animate attributeName="opacity" begin="click 0.3s" dur="0.05s" values="1;0;" fill="freeze" restart="never"></animate>
<g data-name="图片容器">
<foreignObject x="0" y="0" width="1080" height="1500">
<!-- 这里换成毛玻璃了 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="display: block;width: 100%;background: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQIKrACg3vibia5FDWibb3cBtT20VwJYGcEvU0MhbAibsFLJg9wSUpNc1NMhH778QSHakgGkMymW544Aw/0?wx_fmt=jpeg) center center no-repeat;background-size: 100%;vertical-align: top;weixin: dong_dian_jun;pointer-events: none;">
<foreignObject x="0" y="0" width="100%" height="100%">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 1080 1500" style="background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(5px);pointer-events: none;"></svg>
</foreignObject>
<!-- 点击区域一定要保留，不然触发不了 -->
<g data-name="点击区域">
<rect x="0" y="0" width="1080" height="1500" opacity="0" style="pointer-events: visible;"></rect>
<set attributeName="visibility" from="visible" to="hidden" begin="click" dur="1.7s" fill="freeze" restart="never"></set>
</g>
</svg>
</foreignObject>
<!-- 引导点击移动到这里来 -->
<g data-name="引导点击">
<circle opacity="0.3" fill="#fff" cx="540" cy="750" r="33" style="pointer-events: none;">
<animate attributeName="r" values="35;32;35" begin="0s" dur="0.5s" repeatCount="indefinite"></animate>
</circle>
<circle fill="#fff" cx="540" cy="750" r="22" style="pointer-events: none;">
<animate attributeName="opacity" values="1;0.5;1" begin="0s" dur="0.5s" repeatCount="indefinite"></animate>
</circle>
<text transform="translate(540 1000)" fill="#fff" font-size="110px" font-weight="bold" style="text-anchor: middle">快拍我</text>
</g>
<animate attributeName="opacity" begin="click" dur="0.05s" values="1;0;" fill="freeze" restart="never"></animate>
</g>
</g>
<!-- 展开动画【修改展开长度】 -->
<animate attributeName="width" fill="remove" restart="always" calcMode="spline" keySplines="0.52 0 0.48 1.0;0.52 0 0.48 1.0" keyTimes="0; 0.002; 1" values="100%; 600%; 600%" dur="1000s" begin="click 1s"></animate>
<!-- 隐藏展开区域的内容 -->
<animate attributeName="opacity" begin="click 1s" dur="0.05s" values="1;0;" fill="freeze" restart="never"></animate>
</svg>
</section>
</section>
</div>
</body>
</html>
