案例拆解
- 第1步 - 實作毛玻璃效果
- 第2步 - 實作點選拍照效果
- 第3步 - 毛玻璃與拍照相結合
- 第4步 - 實作寬屏點選展開長圖
- 第5步 - 拍照與展開長圖結合
- 第6步 - 效果代碼優化
第1步 - 實作毛玻璃效果
毛玻璃相關文章推薦，點選請看
<!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實作了圖檔的濾鏡效果。
<!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步 - 效果代碼優化
優化兩個地方，一個是拍照後的圖檔删除掉，一個是引導點選放置在點選區域裡面。因為長圖裡面有拍照後的圖檔了，這邊就不需要重複設定了。點選之後是想讓引導點選的提示隐藏起來，是以放置在點選觸發裡面了。
<!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> 複制