公众号图文『SVG快闪轮播动效』模板代码
发布于 4 年前 作者 ljin 3539 次浏览 来自 分享

模板效果

【点击】查看排版效果

模板代码

<section style="display: block; overflow: hidden; width: 350px; height: 500px;margin: 0 auto;background-color: #fff;">
    <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="-375 -500 750 1000" style="display: block; margin: 0 auto; max-width: none !important;" width="100%">
        <g>
            <g transform="translate(-375, -500)">
                <foreignObject x="1100" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJcqPtnn5L5KOFKia8MbXsfoHYz8Wrvib9nb3jL7icQIibmWQFH7RibRznmqA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject> 
                <foreignObject x="2200" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJDCm4CAUibuw9X2VlZA1zJfrJfZ3KsseVOndoxl4RU4KWHvIBETWGCGw/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="3300" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJLrk53wDsGWFJsbbKVjPaXPwNyLWeiaXgicZO2rO0W1ibjYJQCSPpUW3ibg/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="4400" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJAMDkcYHOZliclhibeMo4n6wcFr2yq3bSFdK7beB6dhHocBg3efJ3HvpA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="5500" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJThVn3v9AJECKrxVPw0kXwCnmL58VGB3SdIZsqgNZNmib0BGoLqq0J8g/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="6600" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJ922Y3u5OAxO7ibiaOCY4wA2naU1x79S0TK0mcv3kCtN0ne7LJffBfxcQ/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="7700" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJLJMA1Y75cAWIkv27CCXIU8GMMrzjDkKlQSfiakICedBDhMQXHI4UApQ/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="8800" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJkosagtuomO1GFx5cGn1XWfly2l4tRaonGu2H1kjdXATFn8bSZWzjFg/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="9900" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJM0OiaHhdlVLc8csXyBDmM9lNTMVqflzYVJwA75QvwiccNXFmf8XJ0dUA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="11000" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJjCZNNT58miamWnCwNOYVf1JQRVA2djFGvFOxcdow3ztozfXXotnJKnQ/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="12100" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJ84LujFxSNZRfulzc5D7Z31E1ickcOgeV4qJ3qO6H8ZreOWLnRvntlRQ/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="13200" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJmEZmWxcxeNlYiaf6gtVJugsqXP1qXicuHeDMxxvj7bRVNXMmqf6zv0eQ/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="14300" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJNhCoBjvSv9nVibzNRQxf84aAISncj2JaXNUHc7pHDKLGJsmQ9e8v2fA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="13750" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJyhaxyicbaAzw7EfDEa3vTiat2YIvvCH85PDqm10T3p3zfQO8rPicicfTwg/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="16500" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJYbldIFb7UPkj5LoMLDj5GYF4Rqpnurr2UFNAzwAaJBKxzs5kkCqvFQ/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="17600" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJeDeCO5KtD2WVoh9UuPKFnKNP8E7y1BsHVycsOicDhOfH7qrUCiaYeRxw/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="18700" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJWQAfSU1rlhp5Hutzm6EfWBTucCgQ7FGwR5a1R8Cvnno9tuHMnvSyxQ/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="19800" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJKRe5OnRYZC007g4yH3A5CeM2nJENzo666tbCQfzEiakQ8icyMKc8wnBw/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="20900" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJwqpu2xg97yubM4ia6UiaTBE7mmdUxQmjekQc0XNHTm0ePtEwEq86qRdQ/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="22000" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJFVHsulntg78jkc6JibHI80jE79V9Nu3VZNIUrlZFhic1jSb1cia2x3ibbQ/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="23100" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJjkfakYE8JAsFAnfnLnFoLib1TWLlOVf1C8Cicm1p1Y5Yg7icSiamXLrBtg/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="24200" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJ7Vj38bEA9E1o7k3fiauSRDAQT7vstHN0vbPZfLtzGO45sqCLGV3K7qA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="25300" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJ89NO8zTKYrM8zSqJPGgbKzq8kaHDRVvY2HpjykezzxbEXmOm3iaeBPw/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="26400" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJEP73DgYeib8EwMxF1S9eNaLh7j6AvXtrPGmQ5PH4v0LoqWAJicjGBxBw/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="27500" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJGO2Q04YrSDVdibTO3Zu8TNaOrfAiaEH9ZuKgXRPmazPFUBZ8rrV005iaw/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="28600" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJibaTIxsrprnMW1icu132db0suzYBYDeicbwZmD40PlPteQniaLYMBDRUww/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="29700" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJ5EL6iaMCnqqDRSic3BDtS5szTiaPj0fufgOBicFuzPVBibIbmGcUSOntZaA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <foreignObject x="30800" y="0" width="750" height="1000">
                    <svg height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqRIC2qV6yib64ltnhiaYASKWJsDOMGLfxmgx5FfXflHVZnrd0GCYkRdgDCHK8mFKRsmkxFD9qTj2a3A/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" width="750" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
            </g>
            <animateTransform attributeName="transform" type="translate" values="-1100 0; -1100 0; -1100 0; -1100 0; -1100 0; -2200 0; -2200 0; -2200 0; -2200 0; -2200 0; -3300 0; -3300 0; -3300 0; -3300 0; -3300 0; -4400 0; -4400 0; -4400 0; -4400 0; -4400 0; -5500 0; -5500 0; -5500 0; -5500 0; -5500 0; -6600 0; -6600 0; -6600 0; -6600 0; -6600 0; -7700 0; -7700 0; -7700 0; -7700 0; -7700 0; -8800 0; -8800 0; -8800 0; -8800 0; -8800 0; -9900 0; -9900 0; -9900 0; -9900 0; -9900 0; -11000 0; -11000 0; -11000 0; -11000 0; -11000 0; -12100 0; -12100 0; -12100 0; -12100 0; -12100 0; -13200 0; -13200 0; -13200 0; -13200 0; -13200 0; -14300 0; -14300 0; -14300 0; -14300 0; -14300 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -13750 0; -16500 0; -16500 0; -16500 0; -16500 0; -16500 0; -17600 0; -17600 0; -17600 0; -17600 0; -17600 0; -18700 0; -18700 0; -18700 0; -18700 0; -18700 0; -19800 0; -19800 0; -19800 0; -19800 0; -19800 0; -20900 0; -20900 0; -20900 0; -20900 0; -20900 0; -22000 0; -22000 0; -22000 0; -22000 0; -22000 0; -23100 0; -23100 0; -23100 0; -23100 0; -23100 0; -24200 0; -24200 0; -24200 0; -24200 0; -24200 0; -25300 0; -25300 0; -25300 0; -25300 0; -25300 0; -26400 0; -26400 0; -26400 0; -26400 0; -26400 0; -27500 0; -27500 0; -27500 0; -27500 0; -27500 0; -28600 0; -28600 0; -28600 0; -28600 0; -28600 0; -29700 0; -29700 0; -29700 0; -29700 0; -29700 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0; -30800 0;" restart="never" repeatCount="indefinite" fill="freeze" dur="7.2s" calcMode="discrete" begin="0.05s"></animateTransform>
        </g>
    </svg>
</section>

模板应用

回到顶部