模板效果

点击查看效果

模板代码

<section style="display: flex;overflow-x: scroll;overflow-y: hidden;width: 100%;-webkit-overflow-scrolling:touch;scroll-snap-type: x mandatory;perspective: 1px;">
            <!-- 第一页 -->
            <section style="flex: 0 0 auto;width: 100%;height: 100%;background-color: #000;scroll-snap-align: center;">
                <section style="height: 0;">
                    <section style="transform: translateZ(0.9px) scale(0.1);">
                        <svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VOXEX09cMwn1sDHUL46mYFiceLnlsFWuISLgDM2FlyvlN5NCEHCjrTaHQ/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
                    </section>
                </section>
                <section style="height: 0;">
                    <section style="transform: translateZ(0.5px) scale(0.5);">
                        <svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VOKicZr1DRicT9SKaHXHXrhE1MI6jEN8pusO90BY2fVsg1H8Bl5Ju5Zseg/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
                    </section>
                </section>
                <section>
                    <section style="transform: translateZ(0.2px) scale(0.8);">
                        <svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VORUzibngWbkAgMiaW3OpycUnbg6huCBSib9uicMb5ehCrR4XxVWDIMV4CuA/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
                    </section>
                </section>
            </section>    
            <!-- 第二页 -->
            <section style="flex: 0 0 auto;width: 100%;height: 100%;background-color: #000;scroll-snap-align: center;">
                <section style="height: 0;">
                    <section style="transform: translateZ(0.8px) scale(0.2);">
                        <svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VOXEX09cMwn1sDHUL46mYFiceLnlsFWuISLgDM2FlyvlN5NCEHCjrTaHQ/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
                    </section>
                </section>
                <section style="height: 0;">
                    <section style="transform: translateZ(0.4px) scale(0.6);">
                        <svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VOKicZr1DRicT9SKaHXHXrhE1MI6jEN8pusO90BY2fVsg1H8Bl5Ju5Zseg/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
                    </section>
                </section>
                <section>
                    <section style="transform: translateZ(0.8px) scale(0.2);">
                        <svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VORUzibngWbkAgMiaW3OpycUnbg6huCBSib9uicMb5ehCrR4XxVWDIMV4CuA/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
                    </section>
                </section>
            </section> 
            <!-- 第三页 -->
            <section style="flex: 0 0 auto;width: 100%;height: 100%;background-color: #000;scroll-snap-align: center;">
                <section style="height: 0;">
                    <section style="transform: translateZ(0.9px) scale(0.1);">
                        <svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VOXEX09cMwn1sDHUL46mYFiceLnlsFWuISLgDM2FlyvlN5NCEHCjrTaHQ/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
                    </section>
                </section>
                <section style="height: 0;">
                    <section style="transform: translateZ(0.5px) scale(0.5);">
                        <svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VOKicZr1DRicT9SKaHXHXrhE1MI6jEN8pusO90BY2fVsg1H8Bl5Ju5Zseg/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
                    </section>
                </section>
                <section>
                    <section style="transform: translateZ(0.1px) scale(0.9);">
                        <svg style="display: block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqRZGFZAkT2NJwmzibjUaT5VORUzibngWbkAgMiaW3OpycUnbg6huCBSib9uicMb5ehCrR4XxVWDIMV4CuA/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" viewBox="0 0 690 1400"></svg>
                    </section>
                </section>
            </section>    
        </section>