模板效果

点击查看效果

模板代码

<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>