模板效果

模板代碼

<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設(shè)置彩色圖片為背景圖 --> ? ? ? ? ? ? ? ? ? ?<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> ? ? ? ? ? ? ? ? ? ?<!-- 點擊觸發(fā) --> ? ? ? ? ? ? ? ? ? ?<rect style="pointer-events: painted;" x="0" y="0" width="345" height="150" fill="#000" opacity="0"></rect> ? ? ? ? ? ? ? ?</g> ? ? ? ? ? ? ? ?<!-- 設(shè)置引導(dǎo)點擊 --> ? ? ? ? ? ? ? ?<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>