微信文章制作點(diǎn)擊展開(kāi)SVG圖片樣式教程
1、此樣式只可放置圖片。圖片大小不得超過(guò)10M，如果單張圖片過(guò)大，需要裁切成多張圖進(jìn)行上傳。2、查找樣式，在135編輯器內(nèi)搜索“點(diǎn)擊”。3、使用此樣式，需要授權(quán)同步功能，將編輯好的文章同步到公眾號(hào)后臺(tái)
點(diǎn)擊展開(kāi)SVG樣式效果圖
掃碼可預(yù)覽樣式效果
*注意：此樣式在部分安卓手機(jī)上會(huì)出現(xiàn)閃跳問(wèn)題，這是安卓微信的bug，我們已經(jīng)向微信官方團(tuán)隊(duì)反饋。
——2020年5月28日
使用教程
1、此樣式只可放置圖片。圖片大小不得超過(guò)10M，如果單張圖片過(guò)大，需要裁切成多張圖進(jìn)行上傳。
2、查找樣式，在135編輯器內(nèi)搜索“點(diǎn)擊”。
3、使用此樣式，需要授權(quán)同步功能，將編輯好的文章同步到公眾號(hào)后臺(tái)，點(diǎn)擊此處查看授權(quán)公眾號(hào)教程
使用步驟
使用此樣式需要將菜單欄切換成【專(zhuān)業(yè)版】。方法：點(diǎn)擊【更多功能】-【換專(zhuān)業(yè)版】
點(diǎn)擊樣式，在菜單欄中找到【動(dòng)畫(huà)】。打開(kāi)【SVG動(dòng)畫(huà)設(shè)置】。你可以在此替換樣式內(nèi)所有素材圖片。
默認(rèn)【自由模式】上傳圖片。圖片大小控制在10M內(nèi)。請(qǐng)自行替換模板里的所有圖片素材，以免帶來(lái)圖片侵權(quán)問(wèn)題。
頂部第一張圖和底部最后一張圖是默認(rèn)就顯示的，而中間的圖片需要讀者點(diǎn)擊之后才會(huì)顯示。中間的圖片數(shù)量支持增減。
原模板中頂部圖片尺寸為1080*1005，自行上傳的頂部圖片跟原模板的圖片尺寸比例不一致時(shí)，會(huì)導(dǎo)致圖片部分被遮擋或者頂部露出部分過(guò)多。可以在所有素材圖片上傳完畢后。在HTML代碼里進(jìn)行微調(diào)。
點(diǎn)擊【HTML】，進(jìn)入代碼模式
將下面標(biāo)記的代碼進(jìn)行調(diào)整。一個(gè)是高度，一個(gè)是動(dòng)畫(huà)初始值。既然是被遮擋了部分，那就需要把這個(gè)數(shù)值改得更大一些。
<svg data-copyright="135編輯器" opacity="0" preserveaspectratio="xMidYMin meet" style="height: 312px; width: 345px !important; max-width: 345px !important;" viewbox="0 0 345 312" width="100%" xmlns="http://www.w3.org/2000/svg">
<animate data-svg-style="135-click-move" attributename="height" fill="freeze" restart="never" keytimes="0;0.15;1" values="312;2815;2815" dur="100s" begin="click"></animate>
</svg>
修改完畢之后，再次點(diǎn)擊【HTML】切換到編輯模式，點(diǎn)擊手機(jī)預(yù)覽看看是否合適。如果依然被遮擋，那么再進(jìn)入【HTML】模式調(diào)整一下數(shù)值即可。
此款樣式還可以延伸出更多效果。例如下圖所示的“快門(mén)特效”。
掃碼預(yù)覽快門(mén)特效
立即登錄
