模板效果

点击查看效果

模板代码

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-375 0 750 1000" style="display: block; overflow: hidden;" width="100%" data-info="公众号：懂点君">
    <rect x="-375" y="0" width="750" height="1000" fill="#000"></rect>
    <!-- 一开始显示懂字 -->
    <g transform="translate(0, -1050)">
        <!-- 第一行 -->
        <foreignObject x="-1155" y="0" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHZk3o8f7FeiakpBtgSU8Nvdf2mRjR4BKR8DouXNFcrpWUpbibKqZwZcAA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <foreignObject x="-375" y="0" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHHjc09pwic09xibQvUK64cEQsbIfibLvddI2DG0JZd15RWbtUXJGMLtbjA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <foreignObject x="405" y="0" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHZk3o8f7FeiakpBtgSU8Nvdf2mRjR4BKR8DouXNFcrpWUpbibKqZwZcAA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <!-- 第二行 -->
        <foreignObject x="-1155" y="1050" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHDoQPRMwqxXwwfeGkVr1GWibLicxBgCNrvmNTlYibUF6CLtoeEVX3K3HwQ/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <foreignObject x="-375" y="1050" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHZk3o8f7FeiakpBtgSU8Nvdf2mRjR4BKR8DouXNFcrpWUpbibKqZwZcAA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <foreignObject x="405" y="1050" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHDoQPRMwqxXwwfeGkVr1GWibLicxBgCNrvmNTlYibUF6CLtoeEVX3K3HwQ/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <!-- 第三行 -->
        <foreignObject x="-1155" y="2100" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHPAHFJyzTQH6Il0zXxbmeBTTKicDSsib3Qyw9ejF25qNA4mnUj2vSuVag/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <foreignObject x="-375" y="2100" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHDoQPRMwqxXwwfeGkVr1GWibLicxBgCNrvmNTlYibUF6CLtoeEVX3K3HwQ/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <foreignObject x="405" y="2100" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHPAHFJyzTQH6Il0zXxbmeBTTKicDSsib3Qyw9ejF25qNA4mnUj2vSuVag/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <!-- 第四行 -->
        <foreignObject x="-1155" y="3150" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHHjc09pwic09xibQvUK64cEQsbIfibLvddI2DG0JZd15RWbtUXJGMLtbjA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <foreignObject x="-375" y="3150" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHPAHFJyzTQH6Il0zXxbmeBTTKicDSsib3Qyw9ejF25qNA4mnUj2vSuVag/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <foreignObject x="405" y="3150" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHHjc09pwic09xibQvUK64cEQsbIfibLvddI2DG0JZd15RWbtUXJGMLtbjA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <!-- 第五行 -->
        <foreignObject x="-1155" y="4200" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHZk3o8f7FeiakpBtgSU8Nvdf2mRjR4BKR8DouXNFcrpWUpbibKqZwZcAA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <foreignObject x="-375" y="4200" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHHjc09pwic09xibQvUK64cEQsbIfibLvddI2DG0JZd15RWbtUXJGMLtbjA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <foreignObject x="405" y="4200" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHZk3o8f7FeiakpBtgSU8Nvdf2mRjR4BKR8DouXNFcrpWUpbibKqZwZcAA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <!-- 第六行 -->
        <foreignObject x="-1155" y="5250" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHDoQPRMwqxXwwfeGkVr1GWibLicxBgCNrvmNTlYibUF6CLtoeEVX3K3HwQ/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <foreignObject x="-375" y="5250" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHZk3o8f7FeiakpBtgSU8Nvdf2mRjR4BKR8DouXNFcrpWUpbibKqZwZcAA/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <foreignObject x="405" y="5250" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHDoQPRMwqxXwwfeGkVr1GWibLicxBgCNrvmNTlYibUF6CLtoeEVX3K3HwQ/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <!-- 第七行 -->
        <foreignObject x="-1155" y="6300" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHPAHFJyzTQH6Il0zXxbmeBTTKicDSsib3Qyw9ejF25qNA4mnUj2vSuVag/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <foreignObject x="-375" y="6300" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHDoQPRMwqxXwwfeGkVr1GWibLicxBgCNrvmNTlYibUF6CLtoeEVX3K3HwQ/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <foreignObject x="405" y="6300" width="750" height="1000">
            <svg width="750" height="1000" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_jpg/JpraGu7eGqSFf2iatazfoerJS0036H4iaHPAHFJyzTQH6Il0zXxbmeBTTKicDSsib3Qyw9ejF25qNA4mnUj2vSuVag/0?wx_fmt=jpeg); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg>
        </foreignObject>
        <!-- 向上移动的动画 -->
        <animateTransform type="translate" attributeName="transform" begin="0s" dur="8s" calcMode="spline" fill="freeze" repeatCount="indefinite" 
        values="
        0 -1050; 
        0 -1050;

        0 -581; 
        0 -581; 
        0 -1316; 
        0 -1316;
        0 -2100; 
        0 -2100; 

        0 -1316; 
        0 -1316; 
        0 -2042; 
        0 -2042;
        0 -3150; 
        0 -3150; 

        0 -2042; 
        0 -2042; 
        0 -2786; 
        0 -2786; 
        0 -4200; 
        0 -4200; 

        0 -2786; 
        0 -2786; 
        0 -3521; 
        0 -3521; 
        0 -5250; 
        0 -1050
        " keyTimes="0; 0.1250; 0.1625; 0.1688; 0.2063; 0.2125; 0.2500; 0.3750; 0.4125; 0.4188; 0.4563; 0.4625; 0.5000; 0.6250; 0.6625; 0.6688; 0.7063; 0.7125; 0.7500; 0.8750; 0.9125; 0.9188; 0.9563; 0.9625; 0.999999; 1" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0 0 1 1"></animateTransform>
        <!-- 缩放的动画 -->
        <animateTransform type="scale" attributeName="transform" begin="0s" dur="8s" calcMode="spline" fill="freeze" repeatCount="indefinite" additive="sum" 
        values="
        1; 
        1; 

        0.7; 
        0.7; 
        1; 
        1; 

        0.7; 
        0.7; 
        1; 
        1;

        0.7; 
        0.7; 
        1; 
        1; 

        0.7; 
        0.7; 
        1; 
        1
        " keyTimes="0; 0.1250; 0.1625; 0.2125; 0.2500; 0.3750; 0.4125; 0.4625; 0.5000; 0.6250; 0.6625; 0.7125; 0.7500; 0.8750; 0.9125; 0.9625; 0.999999; 1" keySplines="0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0.42 0 0.58 1.0; 0 0 1 1"></animateTransform data-info="公众号：懂点君">
    </g>
</svg>