SVG互动排版 | 拍照展开长图
发布于 3 年前 作者 juan17 5136 次浏览 来自 分享

案例拆解

  • 第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>


2 回复

酷

有问题微信沟通：dong_dian_jun

回到顶部