微信文章制作點擊展開SVG圖片樣式教程
1、此樣式只可放置圖片。圖片大小不得超過10M,如果單張圖片過大,需要裁切成多張圖進行上傳。2、查找樣式,在135編輯器內(nèi)搜索“點擊”。3、使用此樣式,需要授權同步功能,將編輯好的文章同步到公眾號后臺
點擊展開SVG樣式效果圖
掃碼可預覽樣式效果
*注意:此樣式在部分安卓手機上會出現(xiàn)閃跳問題,這是安卓微信的bug,我們已經(jīng)向微信官方團隊反饋。
——2020年5月28日
使用教程
1、此樣式只可放置圖片。圖片大小不得超過10M,如果單張圖片過大,需要裁切成多張圖進行上傳。
2、查找樣式,在135編輯器內(nèi)搜索“點擊”。
3、使用此樣式,需要授權同步功能,將編輯好的文章同步到公眾號后臺,點擊此處查看授權公眾號教程
使用步驟
使用此樣式需要將菜單欄切換成【專業(yè)版】。方法:點擊【更多功能】-【換專業(yè)版】
點擊樣式,在菜單欄中找到【動畫】。打開【SVG動畫設置】。你可以在此替換樣式內(nèi)所有素材圖片。
默認【自由模式】上傳圖片。圖片大小控制在10M內(nèi)。請自行替換模板里的所有圖片素材,以免帶來圖片侵權問題。
頂部第一張圖和底部最后一張圖是默認就顯示的,而中間的圖片需要讀者點擊之后才會顯示。中間的圖片數(shù)量支持增減。
原模板中頂部圖片尺寸為1080*1005,自行上傳的頂部圖片跟原模板的圖片尺寸比例不一致時,會導致圖片部分被遮擋或者頂部露出部分過多。可以在所有素材圖片上傳完畢后。在HTML代碼里進行微調(diào)。
點擊【HTML】,進入代碼模式
將下面標記的代碼進行調(diào)整。一個是高度,一個是動畫初始值。既然是被遮擋了部分,那就需要把這個數(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>
修改完畢之后,再次點擊【HTML】切換到編輯模式,點擊手機預覽看看是否合適。如果依然被遮擋,那么再進入【HTML】模式調(diào)整一下數(shù)值即可。
此款樣式還可以延伸出更多效果。例如下圖所示的“快門特效”。
掃碼預覽快門特效
立即登錄



