模板效果

https://mp.weixin.qq.com/s/NEh7_LVb1kRKKTrnhRl6cA

模板代码

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="-540 -900 1080 1800" style="display: block; margin: 0 auto; max-width: none !important;" width="100%">
    <g>
        <!------------------------ 【倒计时停止】 ------------------------>
        <g data-author="懂点君·梦幻雪冰">
            <foreignObject x="-540" y="-900" width="1080" height="1800">
                <svg height="1800" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTLC8ib9EnUSRQziaaicJ2fNFbibfOvzl8Vmg2xCibicnpDbKicDLu0PbrI9t1a5BqsGKrnDfWvvPdlwggYg/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;" width="1080" xmlns="http://www.w3.org/2000/svg"></svg>
            </foreignObject>
        </g>
        <g>
            <!------------------------ 【倒计时数字4】 ------------------------>
            <g data-author="懂点君·梦幻雪冰">
                <foreignObject x="-540" y="-900" width="1080" height="1800">
                    <svg height="1800" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTLC8ib9EnUSRQziaaicJ2fNFbjqzI3SAAW5GQukHl0HuZP2Lzvg1rlPqTCjouh2KEW9grbVkGuwlQhQ/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;" width="1080" xmlns="http://www.w3.org/2000/svg"></svg>
                </foreignObject>
                <animateTransform calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" restart="never" begin="1.8s" values="1; 0.90; 1.5;" keyTimes="0; 0.3; 1" dur="0.6s" type="scale" attributeName="transform" fill="freeze" additive="sum"></animateTransform>
                <animate attributeName="opacity" restart="never" begin="2.0s" dur="0.4s" values="1; 0;" keySplines="0.42 0 0.58 1.0" fill="freeze"></animate>
                <!------------------------ 【倒计时数字3】 ------------------------>
                <g data-author="懂点君·梦幻雪冰">
                    <foreignObject x="-540" y="-900" width="1080" height="1800">
                        <svg height="1800" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTLC8ib9EnUSRQziaaicJ2fNFbqslMfFH9FrT1lODWRBbjxhNT6B4SXhnu09NC8JziaHkIfxLxFoia4BcA/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;" width="1080" xmlns="http://www.w3.org/2000/svg"></svg>
                    </foreignObject>
                    <animateTransform calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" restart="never" begin="1.2s" values="1; 0.90; 1.5;" keyTimes="0; 0.3; 1" dur="0.6s" type="scale" attributeName="transform" fill="freeze" additive="sum"></animateTransform>
                    <animate attributeName="opacity" restart="never" begin="1.4s" dur="0.4s" values="1; 0;" keySplines="0.42 0 0.58 1.0" fill="freeze"></animate>
                    <!------------------------ 【倒计时数字2】 ------------------------>
                    <g data-author="懂点君·梦幻雪冰">
                        <foreignObject x="-540" y="-900" width="1080" height="1800">
                            <svg height="1800" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTLC8ib9EnUSRQziaaicJ2fNFbrPxZDRRI785uc2nm4DARicBgDXWCFrAE1SzMCWTI6SOEgZS4WFrnb4A/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;" width="1080" xmlns="http://www.w3.org/2000/svg"></svg>
                        </foreignObject>
                        <animateTransform calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" restart="never" begin="0.6s" values="1; 0.90; 1.5;" keyTimes="0; 0.3; 1" dur="0.6s" type="scale" attributeName="transform" fill="freeze" additive="sum"></animateTransform>
                        <animate attributeName="opacity" restart="never" begin="0.8s" dur="0.4s" values="1; 0;" keySplines="0.42 0 0.58 1.0" fill="freeze"></animate>
                        <!------------------------ 【倒计时数字1】 ---------------------->
                        <g data-author="懂点君·梦幻雪冰">
                            <foreignObject x="-540" y="-900" width="1080" height="1800">
                                <svg height="1800" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTLC8ib9EnUSRQziaaicJ2fNFbqP026KVp9XZiaLFv1k0wnJKA8DIzibpjOqVC75TRpNrfRy81xpY5wXxA/0?wx_fmt=png); background-color: #000; background-size: 100% auto; background-repeat: no-repeat;" width="1080" xmlns="http://www.w3.org/2000/svg"></svg>
                            </foreignObject>
                            <!-- 缩放 -->
                            <animateTransform calcMode="spline" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0" keyTimes="0; 0.3; 1" restart="never" begin="0s" values="1; 0.90; 1.5;" dur="0.6s" type="scale" attributeName="transform" fill="freeze" additive="sum"></animateTransform>
                            <!-- 透明度 -->
                            <animate attributeName="opacity" restart="never" begin="0.2s" dur="0.4s" values="1; 0;" keySplines="0.42 0 0.58 1.0" fill="freeze"></animate>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

模板应用