模板效果

点击查看效果

模板代码

<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>
            </g>
        </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>
                        </g>
                    </g>
                </g>
                <!-- 接收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>
                        </g>
                    </g>
                </g>
                <!-- 接收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>
                        </g>
                    </g>
                </g>
                <!-- 接收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>