模板效果

模板代码

<section style="background-color: #000;vertical-align:top;">
    <svg style="display: block;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 750 2000" enable-background="new 0 0 750 2000" xml:space="preserve">
        <g>
            <g>
                <!-- 向上滚动的动画 -->
                <animateTransform attributeName="transform" type="translate" begin="click" values="0 0;0 -13400" dur="32s" calcMode="linear" fill="freeze" restart="never"></animateTransform>
                <g>
                    <g>
                        <!-- 滚动的图片 -->
                        <image width="750" height="7000" href="https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqS2IrHg41niaP4N9WTuMe7JXX93578jP1jysbYBibbJRialcJsC1a98NGRl69SXBdCG4z70VG6D4y7ow/0?wx_fmt=jpeg" transform="translate(0, 8395)"></image>
                        <image width="750" height="8000" href="https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqS2IrHg41niaP4N9WTuMe7JXLnCgyic1gQRrziaibQMq9NwzN7dtd1h8qXV5x32CMF8iblay9WadhDV6jg/0?wx_fmt=jpeg" transform="translate(0, 395)"></image>
                    </g>
                    <g>
                        <!-- 向下滚动的动画 -->
                        <animateTransform attributeName="transform" type="translate" begin="click" values="0 0;0 13400" dur="32s" calcMode="linear" fill="freeze" restart="never"></animateTransform>
                        <g>
                            <!-- 放映机图片 -->
                            <image width="750" height="400" href="https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqS2IrHg41niaP4N9WTuMe7JXe5t9UBYF0zj2ib6LOuUUcWUpZZuB8KY0fSEqibT56otQGYt4d1L7Ufqw/0?wx_fmt=png"></image>
                        </g>
                        <rect y="400" fill="#39f" width="750" height="1600" opacity="0"></rect>
                    </g>
                </g>
            </g>
        </g>
    </svg>
</section>