模板效果

模板代码

<svg style="display: inline-block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTQ4K2BpnzTTeF2HqwRLkWe4VRaibYQwSGOR4PvdKL1pzZ1iaxbuVHlZ2luiaFCMfCefqy4n0ZW1PWVw/0?wx_fmt=png), url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTQ4K2BpnzTTeF2HqwRLkWeXOLg8nwZslKiciaCtmyyXoKzumEq7r4LNd5Q90WlhqaKGZvSpUBOvqbQ/0?wx_fmt=png);background-size: 100% auto, 100% auto;background-repeat: no-repeat, no-repeat;background-position: 0 0, 0 99.5%;pointer-events: none" viewBox="0 0 345 1128" data-author="公众号：懂点君">    <g>        <foreignObject x="0" y="0" width="345" height="1128">            <svg style="display: inline-block;width: 100%;pointer-events: none" width="345px" height="150px">                <foreignObject x="0" y="0" width="345" height="1128">                    <!-- 这个svg设置彩色图片为背景图 -->                    <svg style="display: inline-block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTQ4K2BpnzTTeF2HqwRLkWeibPomWu0VW3IJDFHa7DbFZN7Qunjnfhn46CaiaLtavlvjyFjPNkEe6tA/0?wx_fmt=png), url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTQ4K2BpnzTTeF2HqwRLkWeLMtDVicoJChicZDJZkASUuxjXEObvmKySpRpMYd5b3TRVaFkyMVwZf8Q/0?wx_fmt=png);background-size: 100% auto, 100% auto;background-repeat: no-repeat, no-repeat;background-position: 0 0, 0 99.5%;pointer-events: none" viewBox="0 0 345 1128" data-author="公众号：懂点君"></svg>                </foreignObject>                <!-- 色彩图片容器展开动画 -->                <animate attributeName="height" values="150;1128" dur="30s" fill="freeze" begin="click" restart="never"></animate>                <g>                    <!-- 点击触发 -->                    <rect style="pointer-events: painted;" x="0" y="0" width="345" height="150" fill="#000" opacity="0"></rect>                </g>                <!-- 设置引导点击 -->                <g style="pointer-events: none">                    <circle fill="#FA5151" cx="172.5" cy="75" r="44">                        <animate attributeName="opacity" values="1;0.3" dur="1.5s" begin=".2s" repeatCount="indefinite"></animate>                        <animate attributeName="r" values="10;30" dur="1.5s" begin=".2s" repeatCount="indefinite"></animate>                    </circle>                </g>            </svg>        </foreignObject>      </g></svg>