模板效果

点击查看效果

模板代码

<section style="width: 345px;margin: 0 auto;font-size: 0;line-height: 0;">
    <section style="overflow-y: scroll;height: 600px;perspective: 3px;" data-author="公众号：懂点君">
        <!-- 风景图片 -->
        <section>
            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQ2MclqUTetQpexkpgDHp88EycpeqThGxza9TelvVyb3EcucYIjHibEPlL54BcBytoGQicSGzR5MyoQ/0?wx_fmt=jpeg);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1280 525" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
        </section>
        <!-- 文字图片 -->
        <section style="margin-top: -6px;transform: translateZ(1.2px) scale(0.3);">
            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ2MclqUTetQpexkpgDHp88BTF91vy3WBkuMiafdKxf28B2GUXxTVibHLDxraQO34YFDPdfAxp5T7Zw/0?wx_fmt=png);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1951 633" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
        </section>
        <!-- 风景图片 -->
        <section style="margin-top: -105px">
            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQ2MclqUTetQpexkpgDHp88sZPabDnbTONachiadD4pD1JBeD3fJ99148PgovWSu0R3tEAsZgWvmyQ/0?wx_fmt=jpeg);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1280 792" width="100%" xmlns="http://www.w3.org/2000/svg" data-author="公众号：懂点君"></svg>
        </section>
        <!-- 文字图片 -->
        <section style="margin-top: -124px;transform: translateZ(1.3px) scale(0.3);">
            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ2MclqUTetQpexkpgDHp88Jp3fjpHt0IIWJHcrxZw0lePnavHdyPo9h10TrqPpBz3woG3bqKv9Nw/0?wx_fmt=png);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 2630 1081" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
        </section>
        <!-- 风景图片 -->
        <section style="margin-top: -21px">
            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQ2MclqUTetQpexkpgDHp889ZUWoibiaVibkWhMvcOGFm4ItJHejKhSjJ5giaRkV3th8Sk3WrW2R5Lyag/0?wx_fmt=jpeg);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1280 1153" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
        </section>
        <!-- 文字图片 -->
        <section style="margin-top: -360px;transform: translateZ(1.2px) scale(0.3);">
            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ2MclqUTetQpexkpgDHp88ON5l8P5XWyibRdcich1YVYs656yKibvDglwyz5jkiaQibrU2XV6icdyvgGgw/0?wx_fmt=png);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 2568 2022" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
        </section>
        <!-- 风景图片 -->
        <section style="margin-top: 90px;">
            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQ2MclqUTetQpexkpgDHp88eOkAdLoUp0GsP6NTDEypRPl0w2r2gSdrITElVlfvaFexu6SvJecYGw/0?wx_fmt=jpeg);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1280 887" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
        </section>
        <!-- 文字图片 -->
        <section style="margin-top: -273px;transform: translateZ(1.2px) scale(0.3);">
            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ2MclqUTetQpexkpgDHp88gGsZfgxJO78gvkWnwOJIiapia1KFMXhLeg0ocVCovhhuicYTzL7libW18A/0?wx_fmt=png);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1280 1368" width="100%" xmlns="http://www.w3.org/2000/svg" data-author="公众号：懂点君"></svg>
        </section>
        <!-- 风景图片 -->
        <section style="margin-top: -103px;">
            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqQ2MclqUTetQpexkpgDHp88kgPhiavSyQOqWbUrLobQ99Myy86qkyechyoMOzNTIszmICwCZjh6H9Q/0?wx_fmt=jpeg);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 1280 1421" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
        </section>
        <!-- 文字图片 -->
        <section style="margin-top: -329px;transform: translateZ(1.2px) scale(0.3);">
            <svg style="background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqQ2MclqUTetQpexkpgDHp880d3wGKVj8A4t2xHQygjLOK837P0eEnN3SQyicfHdAK2SQCicdxlHBXFA/0?wx_fmt=png);background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;-webkit-tap-highlight-color: transparent;" viewBox="0 0 2106 1082" width="100%" xmlns="http://www.w3.org/2000/svg" data-author="公众号：懂点君"></svg>
        </section>
    </section>
</section>