微信公众号 SVG长按互动
<section class="" style="display: block;width: 100%;height:667px;overflow:hidden;margin-top: -1px;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll; background-image: url(‘http://test.houjt.cn/userproject/cjytest/svg/img/10-23/1.gif‘); -webkit-tap-highlight-color: transparent;user-select: none;"> <svg enable-background="new 0 0 750 1334" space="preserve" style="display: block;width: 100%;height:667px;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size: 100%;background-attachment: scroll; background-image: url(‘http://test.houjt.cn/userproject/cjytest/svg/img/10-23/1.jpg‘); -webkit-tap-highlight-color: transparent;" version="1.1" viewBox="0 0 750 1334" x="0px" xlink="http://www.w3.org/1999/xlink" xml="" xmlns="http://www.w3.org/2000/svg" y="0px"> <animate attributeName="opacity" values="1;1;0" begin="touchstart" end="touchend" dur="1.5s" keyTimes="0;.3;1" fill="freeze" restart="whenNotActive"></animate> <animate attributeName="opacity" begin="touchend" to="1" dur="1.5s" fill="freeze" restart="whenNotActive"></animate> </svg> </section>
把代码复制到135编辑器可以手机扫描生成的预览二维码码查看实际效果。
P.S. 预览二维码要内容里有文字才能生成,单纯放svg标签而没有文字内容,135编辑器是生成不了预览二维码的,如果生成不了码,就在上面随便打几个字在试试
参考链接:
详细教你微信公众号正文页SVG交互开发
相关推荐
mapaler 2020-07-17
MIKUScallion 2020-07-05
Dickzeng 2020-07-05
wallowyou 2020-06-28
hermanncain 2020-06-25
mapaler 2020-06-21
Dickzeng 2020-06-17
程序员俱乐部 2020-06-11
lanzhusiyu 2020-06-09
hermanncain 2020-05-09
Elena0 2020-04-11
Leonwey 2020-04-11
wallowyou 2020-03-05
jinxiutong 2020-02-10
jinxiutong 2020-02-03
mqbeauty 2020-01-08
mapaler 2020-01-17
Elena0 2020-01-12
mapaler 2020-01-05