很多胖友在排版的時(shí)候，會(huì)遇到有多張圖片需要排版的情況，三兒一般會(huì)建議新手小白們先按最簡(jiǎn)單方式上下、左右平鋪排列，這樣最不容易出錯(cuò)。

這么說(shuō)，難道還有高階的玩法？先賣(mài)個(gè)關(guān)子，來(lái)看看三兒下面做的這個(gè)圖片展示的案例吧。

點(diǎn)擊人物展開(kāi)圖片

怎么樣，用SVG來(lái)展示這5張圖片，是不是更有創(chuàng)意了！

這種圖片展開(kāi)，人物跟隨移動(dòng)的效果使用的是SVG編輯器的『點(diǎn)擊展開(kāi)同時(shí)上層物體移動(dòng)-自定義觸發(fā)』組合，展開(kāi)內(nèi)容中的圖片數(shù)沒(méi)有限制，想放幾張就放幾張！

想學(xué)嗎？來(lái)看看三兒是怎么做出來(lái)的吧↓

通過(guò)135編輯器左側(cè)入口進(jìn)入svg編輯器

或者直接在瀏覽器輸入svg編輯器網(wǎng)址進(jìn)入：

http://m.qwer.com.cn/svgeditor/

找到『點(diǎn)擊展開(kāi)同時(shí)上層物體移動(dòng)-自定義觸發(fā)』，點(diǎn)擊將組合添加到中間的編輯區(qū)

在編輯頁(yè)面右側(cè)點(diǎn)擊『添加圖片』按鈕，為素材添加觸發(fā)展開(kāi)圖和小元素圖片

鼠標(biāo)拖動(dòng)紅色方框，為小元素圖片設(shè)置觸發(fā)熱區(qū)的大小和所在位置。

為展開(kāi)的內(nèi)容設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)，數(shù)值越大，展開(kāi)的時(shí)間越慢；數(shù)值越小，展開(kāi)的時(shí)間越快

點(diǎn)擊編輯器右側(cè)『編輯展開(kāi)內(nèi)容』進(jìn)入新的編輯頁(yè)面，編輯展開(kāi)內(nèi)容

選擇『批量無(wú)縫圖（點(diǎn)擊不可彈出）』或『無(wú)縫圖（點(diǎn)擊不可彈出）』素材，上傳好圖片即可

注意：

該效果展開(kāi)內(nèi)容只支持放不可彈出無(wú)縫圖，除了小元素圖片以外的底部所有背景圖都需要寬度一致

展開(kāi)內(nèi)容編輯完成后，點(diǎn)擊頁(yè)面上方的『完成』按鈕，返回主編輯頁(yè)面

制作好的SVG文章可以通過(guò)使用『同步』或『導(dǎo)出』功能，保存到微信公眾號(hào)平臺(tái)（ps:不知道咋同步和導(dǎo)出的胖友，點(diǎn)擊按鈕，根據(jù)提示操作即可）

注意：

如使用導(dǎo)出代碼功能，則需根據(jù)SVG效果的使用平臺(tái)（135編輯器/微信后臺(tái)），選擇對(duì)應(yīng)平臺(tái)的代碼進(jìn)行復(fù)制，盡量不要直接粘貼代碼，以免效果有誤。

以上就是

『點(diǎn)擊展開(kāi)同時(shí)上層物體移動(dòng)』的使用教程

除了這種圖片展示方式

SVG編輯器里還有更多

酷炫又有創(chuàng)意的圖片展示SVG

『點(diǎn)擊放大換圖展開(kāi)』

『自動(dòng)拼圖分裂式換圖展開(kāi)』

『點(diǎn)擊開(kāi)門(mén)展開(kāi)』

......

下一期你想看什么

歡迎在評(píng)論區(qū)留言呀~