模板效果
模板代码
<section style="line-height: 0;">
<!-- 抵消touchstart事件 -->
<section style="height: 0;transform: scale(1);">
<svg style="display: inline-block;isolation: isolate;transform: translateZ(1px);-webkit-tap-highlight-color: transparent;user-select: none;vertical-align: top;pointer-events: none;" viewBox="0 0 1200 400" width="100%" opacity="0" xmlns="http://www.w3.org/2000/svg">
<g data-info="懂点君">
<rect x="0" y="0" fill="#000" width="400" height="400" pointer-events="visible">
<set attributeName="visibility" from="visible" to="hidden" begin="touchstart" dur="0.25s" fill="remove" restart="always"></set>
</rect>
<rect x="400" y="0" fill="#000" width="400" height="400" pointer-events="visible">
<set attributeName="visibility" from="visible" to="hidden" begin="touchstart" dur="0.25s" fill="remove" restart="always"></set>
</rect>
<rect x="800" y="0" fill="#000" width="400" height="400" pointer-events="visible">
<set attributeName="visibility" from="visible" to="hidden" begin="touchstart" dur="0.25s" fill="remove" restart="always"></set>
</rect>
</svg>
</section>
<section style
="display: flex;width: 100%;">
<!-- 模块 -->
<section style="line-height: 0;">
<section style="height: 0;">
<!-- 放大状态显示的图片 -->
<svg style="display: inline-block;background-position: 0 0;background-repeat: no-repeat;background-size: 100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqTw3a7MicXl0icIu4yBQ4KKF8nzm0kDRHDWvNEg9ykauD9LR1XjVbFWKGWFNvwcdQKHY2Zicpmdia0Rjg/0?wx_fmt=jpeg);width: 100%;vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 750" x="0" y="0"></svg>
</section>
<svg width="100%" viewBox="0 0 400 400" style="margin-bottom: -1px;pointer-events: none;background-position: 0 0;background-size: 100% 100%;background-repeat: no-repeat;-webkit-tap-highlight-color: transparent;user-select: none;vertical-align: top;max-width: 100% !important;min-width: 100% !important;">
<g style="pointer-events: none;" data-info="懂点君">
<!-- 缩小状态显示的图片 -->
<foreignObject opacity="1" width="100%" height="100%">
<svg style="display: inline-block;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqTw3a7MicXl0icIu4yBQ4KKF8NicseVHianr1eR9zxs4LZxac52LdwUz8knHicQZhCiaNLtUP8zK4rsKLvA/0?wx_fmt=jpeg);background-position: 0 0;background-size: 100% 100%;background-repeat: no-repeat;-webkit-tap-highlight-color: transparent;user-select: none;vertical-align: top;max-width: 100% !important;min-width: 100% !important;pointer-events: none;" viewBox="0 0 400 400" width="100%"></svg>
</foreignObject>
<g opacity="0" style="pointer-events: none;" transform="translate(0 0)">
<!-- 接收click事件，向左移动svg的宽度 -->
<animateTransform attributeName="transform" type="translate" values="-800 0;-400 0;-400 0" begin="click" dur="999s" restart="always" fill="remove" keyTimes="0;0.001;1"></animateTransform>
<!-- 接收touchstart事件，向右移动svg的宽度 -->
<animateTransform attributeName="transform" type="translate" values="-800 0;0 0;0 0" begin="touchstart+0.3s" dur="999s" restart="always" fill="remove" keyTimes="0;0.001;1"></animateTransform>
<g style="opacity: 0.5;">
<animateTransform attributeName="transform" type="translate" values="0 9999;0 9999;" begin="touchstart" dur="1s" restart="always" fill="remove"></animateTransform>
<rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100%" height="100%" style="pointer-events: visible;">
<set attributeName="visibility" from="visible" to="hidden" begin="click" dur="1.2s" fill="remove" restart="always"></set>
</rect>
<rect xmlns="http://www.w3.org/2000/svg" x="100%" y="34%" width="100%" height="66%" style="pointer-events: visible;" fill="#000000">
<animateTransform attributeName="transform" type="translate" values="9999 -9999;9999 -9999" begin="touchstart" dur="1.2s" fill="remove" restart="always" calcMode="discrete"></animateTransform>
</rect>
<!-- 接收click事件，透明度隐藏 -->
<animate fill="freeze" dur="999s" attributeName="opacity" begin="click" restart="always" values="1;0;0" keyTimes="0;0.0003;1"></animate>
<!-- 接收touchstart事件，透明度 -->
<animate fill="freeze" dur="999s" attributeName="opacity" begin="touchstart+0.3s" restart="always" values="0;1;1" keyTimes="0;0.0005;1"></animate>
<!-- 接收click事件，宽度变大 -->
<animate attributeName="width" fill="remove" restart="always" calcMode="spline" keySplines="1 0 1 0;0.12 0 0.88 1.0" keyTimes="0;0.001;1" values="0;999999;999999" dur="999s" begin="click" attributeType="CSS"></animate>
<!-- 接收touchstart事件，宽度变为100% -->
<animate attributeName="width" fill="remove" restart="always" calcMode="spline" keySplines="0 1 0 1; 0 1 0 1; 0.62 0 0.38 1.0" keyTimes="0;0.0001;0.0008;1" values="999999;999999;0;100%" dur="999s" begin="touchstart+0.3s" attributeType="CSS"></animate>
</svg>
</section>
<!-- 模块 -->
<section style="line-height: 0;">
<section style="height: 0;">
<!-- 放大状态显示的图片 -->
<svg style="display: inline-block;background-position: 0 0;background-repeat: no-repeat;background-size: 100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqTw3a7MicXl0icIu4yBQ4KKF85QpmMbtUECt7b6RDQ7js8Yia7XYQNLAGZ780HXSlrLs8XTkFp1KA1Gw/0?wx_fmt=jpeg);width: 100%;vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 750" x="0" y="0"></svg>
</section>
<svg width="100%" viewBox="0 0 400 400" style="margin-bottom: -1px;pointer-events: none;background-position: 0 0;background-size: 100% 100%;background-repeat: no-repeat;-webkit-tap-highlight-color: transparent;user-select: none;vertical-align: top;max-width: 100% !important;min-width: 100% !important;">
<g style="pointer-events: none;" data-info="懂点君">
<!-- 缩小状态显示的图片 -->
<foreignObject opacity="1" width="100%" height="100%">
<svg style="display: inline-block;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqTw3a7MicXl0icIu4yBQ4KKF88iafjsbCfTQsRNDrKIx7BBQG4DfWE6Mo05ERf519rKkCB8k5XF4QWPQ/0?wx_fmt=jpeg);background-position: 0 0;background-size: 100% 100%;background-repeat: no-repeat;-webkit-tap-highlight-color: transparent;user-select: none;vertical-align: top;max-width: 100% !important;min-width: 100% !important;pointer-events: none;" viewBox="0 0 400 400" width="100%"></svg>
</foreignObject>
<g opacity="0" style="pointer-events: none;" transform="translate(0 0)">
<!-- 接收click事件，向左移动svg的宽度 -->
<animateTransform attributeName="transform" type="translate" values="-800 0;-400 0;-400 0" begin="click" dur="999s" restart="always" fill="remove" keyTimes="0;0.001;1"></animateTransform>
<!-- 接收touchstart事件，向右移动svg的宽度 -->
<animateTransform attributeName="transform" type="translate" values="-800 0;0 0;0 0"
begin="touchstart+0.3s" dur="999s" restart="always" fill="remove" keyTimes="0;0.001;1"></animateTransform>
<g style="opacity: 0.5;">
<animateTransform attributeName="transform" type="translate" values="0 9999;0 9999;" begin="touchstart" dur="1s" restart="always" fill="remove"></animateTransform>
<rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100%" height="100%" style="pointer-events: visible;">
<set attributeName="visibility" from="visible" to="hidden" begin="click" dur="1.2s" fill="remove" restart="always"></set>
</rect>
<rect xmlns="http://www.w3.org/2000/svg" x="100%" y="34%" width="100%" height="66%" style="pointer-events: visible;" fill="#000000">
<animateTransform attributeName="transform" type="translate" values="9999 -9999;9999 -9999" begin="touchstart" dur="1.2s" fill="remove" restart="always" calcMode="discrete"></animateTransform>
</rect>
<!-- 接收click事件，透明度隐藏 -->
<animate fill="freeze" dur="999s" attributeName="opacity" begin="click" restart="always" values="1;0;0" keyTimes="0;0.0003;1"></animate>
<!-- 接收touchstart事件，透明度 -->
<animate fill="freeze" dur="999s" attributeName="opacity" begin="touchstart+0.3s" restart="always" values="0;1;1" keyTimes="0;0.0005;1"></animate>
<!-- 接收click事件，宽度变大 -->
<animate attributeName="width" fill="remove" restart="always" calcMode="spline" keySplines="1 0 1 0;0.12 0 0.88 1.0" keyTimes="0;0.001;1" values="0;999999;999999" dur="999s" begin="click" attributeType="CSS"></animate>
<!-- 接收touchstart事件，宽度变为100% -->
<animate attributeName="width" fill="remove" restart="always" calcMode="spline" keySplines="0 1 0 1; 0 1 0 1; 0.62 0 0.38 1.0" keyTimes="0;0.0001;0.0008;1" values="999999;999999;0;100%" dur="999s" begin="touchstart+0.3s" attributeType="CSS"></animate>
</svg>
</section>
<!-- 模块 -->
<section style="line-height: 0;">
<section style="height: 0;">
<!-- 放大状态显示的图片 -->
<svg style="display: inline-block;background-position: 0 0;background-repeat: no-repeat;background-size: 100% 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqTw3a7MicXl0icIu4yBQ4KKF8dPfM9KYGtKeX19kyics6J3E3DjCDu0cK2RTtK4J3GJHU5cZE1IetTqA/0?wx_fmt=jpeg);width: 100%;vertical-align: top;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 750" x="0" y="0"></svg>
</section>
<svg width="100%" viewBox="0 0 400 400" style="margin-bottom: -1px;pointer-events: none;background-position: 0 0;background-size: 100% 100%;background-repeat: no-repeat;-webkit-tap-highlight-color: transparent;user-select: none;vertical-align: top;max-width: 100% !important;min-width: 100% !important;">
<g style="pointer-events: none;" data-info="懂点君">
<!-- 缩小状态显示的图片 -->
<foreignObject opacity="1" width="100%" height="100%">
<svg style="display: inline-block;background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqTw3a7MicXl0icIu4yBQ4KKF8xIhVp0qIYPMV59xy0yrZgrEMwiaSFicQkIjbbq6iaN8IU5QKyPuQ6UnDg/0?wx_fmt=jpeg);background-position: 0 0;background-size: 100% 100%;background-repeat: no-repeat;-webkit-tap-highlight-color: transparent;user-select: none;vertical-align: top;max-width: 100% !important;min-width: 100% !important;pointer-events: none;" viewBox="0 0 400 400" width="100%"></svg>
</foreignObject>
<g opacity="0" style="pointer-events: none;" transform="translate(0 0)">
<!-- 接收click事件，向左移动svg的宽度 -->
<animateTransform attributeName="transform" type="translate" values="-800 0;-400 0;-400 0" begin="click" dur="999s" restart="always" fill="remove" keyTimes="0;0.001;1"></animateTransform>
<!-- 接收touchstart事件，向右移动svg的宽度 -->
<animateTransform attributeName="transform" type="translate" values="-800 0;0 0;0 0" begin="touchstart+0.3s" dur="999s" restart="always" fill="remove" keyTimes="0;0.001;1"></animateTransform>
<g style="opacity: 0.5;">
<animateTransform attributeName="transform" type="translate" values="0 9999;0 9999;" begin="touchstart" dur="1s" restart="always" fill="remove"></animateTransform>
<rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100%" height="100%" style="pointer-events: visible;">
<set attributeName="visibility" from="visible" to="hidden" begin="click" dur="1.2s" fill="remove" restart="always"></set>
</rect>
<rect xmlns="http://www.w3.org/2000/svg" x="100%" y="34%" width="100%" height="66%" style="pointer-events: visible;" fill="#000000">
<animateTransform attributeName="transform" type="translate" values="9999 -9999;9999 -9999" begin="touchstart" dur="1.2s" fill="remove" restart="always" calcMode="discrete"></animateTransform>
</rect>
<!-- 接收click事件，透明度隐藏 -->
<animate fill="freeze" dur="999s" attributeName="opacity" begin="click" restart="always" values="1;0;0" keyTimes="0;0.0003;1"></animate>
<!-- 接收touchstart事件，透明度 -->
<animate fill="freeze" dur="999s" attributeName="opacity" begin="touchstart+0.3s" restart="always" values="0;1;1" keyTimes="0;0.0005;1"></animate>
<!-- 接收click事件，宽度变大 -->
<animate attributeName="width" fill="remove" restart="always" calcMode="spline" keySplines="1 0 1 0;0.12 0 0.88 1.0" keyTimes="0;0.001;1" values="0;999999;999999" dur="999s" begin="click" attributeType="CSS"></animate>
<!-- 接收touchstart事件，宽度变为100% -->
<animate attributeName="width" fill="remove" restart="always" calcMode="spline" keySplines="0 1 0 1; 0 1 0 1; 0.62 0 0.38 1.0" keyTimes="0;0.0001;0.0008;1" values="999999;999999;0;100%" dur="999s" begin="touchstart+0.3s" attributeType="CSS"></animate>
</svg>
</section>
</section>
</section>