模板效果

点击查看效果

模板代码

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -500 750 1000" style="display: block; overflow: hidden;" width="100%" data-info="公众号：懂点君">
    <rect x="0" y="-500" width="750" height="1000" fill="#000"></rect>
    <!-- 一开始显示懂字 -->
    <g transform="translate(-770, 0)">
        <!-- 第一行 -->
        <foreignObject x="0" y="-1520" 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="770" y="-1520" 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="1540" y="-1520" 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="2310" y="-1520" 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="3080" y="-1520" 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="3850" y="-1520" 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="4620" y="-1520" 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="0" y="-500" 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="770" y="-500" 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="1540" y="-500" 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="2310" y="-500" 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="3080" y="-500" 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="3850" y="-500" 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="4620" y="-500" 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="0" y="520" 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="770" y="520" 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="1540" y="520" 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="2310" y="520" 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="3080" y="520" 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="3850" y="520" 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="4620" y="520" 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="
        -770 0; 
        -770 0;

        -426 0; 
        -426 0; 
        -965 0; 
        -965 0;
        -1540 0; 
        -1540 0; 

        -965 0; 
        -965 0; 
        -1497 0; 
        -1497 0;
        -2310 0; 
        -2310 0; 

        -1497 0; 
        -1497 0; 
        -2043 0; 
        -2043 0; 
        -3080 0; 
        -3080 0; 

        -2043 0; 
        -2043 0; 
        -2582 0; 
        -2582 0; 
        -3850 0; 
        -770 0
        " 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>