朋友們大家好，我是三兒

最近大家刷小紅書，有沒有刷到[同事工牌已經(jīng)next level]點進去一看，好家伙大家精神狀態(tài)都這么美麗的嗎？

作為新媒體人，看到這么有趣的話題咱們的網(wǎng)感雷達早就「滴答滴」響起來了。

內(nèi)容素材有了，該用什么樣的形式呈現(xiàn)呢？

我們一般有兩種思路，一是用點擊換圖，二是利用滑動呈現(xiàn)。

點擊換圖，相對比較簡單，做兩張尺寸相同的圖片即可，舉個列子。

▲點擊圖片換圖▲

多次點擊形狀（X形狀）過渡換圖

組件ID：754

若是想要使用其他點擊換圖效果，我們可以在SVG編輯器中搜索「點擊換圖」，選擇我們喜歡的效果使用即可。

整體而言點擊換圖的圖片設(shè)計相對簡單，確保尺寸一致即可，但如果用滑動，需要考慮的就會多一些，舉個例子。

底圖固定雙層橫向滑動-左右留白-滑動圖可跳轉(zhuǎn)

組件ID：526

我們選擇了一個雙層滑動，背景圖固定頂層滑動。

三兒，你中間這個圖也沒有內(nèi)容呀。

非也，因為這張圖是一直透明底的png圖，如果我們給他加上一個背景，你就能看到里面的內(nèi)容。

滑動圖1

滑動圖2

是不是這樣就看到內(nèi)容了，這個滑動需要大家想明白的是，我們什么內(nèi)容需要用戶滑動填充，就把該內(nèi)容單獨做一張圖出來。

例如這個案例，我們需要用戶將「鐘」字滑出來，那么背景圖就需要制作一個不含「鐘」字的內(nèi)容。

我們準備好設(shè)計圖后，就能開始制作滑動效果了。

在135編輯器左側(cè)，點擊SVG編輯器，進入SVG編輯器頁面。

我們是一個橫向雙層滑動效果，所以我們只需要選擇符合這個要求的組件即可，這里我們選擇的是底圖固定雙層橫向滑動-左右留白-滑動圖可跳轉(zhuǎn)組件ID：526

將組件添加進編輯頁面，在右側(cè)添加對應(yīng)的素材內(nèi)容。

制作好后，我們可以選擇「導(dǎo)出」復(fù)制到135編輯器中，在SVG編輯器右上角找到「導(dǎo)出」選擇「復(fù)制代碼到135編輯器」

只需要Ctrl+v就可以了，如果想要添加在模板指定位置內(nèi)，可以使用區(qū)域代碼。

若是要替換圖片位置 覆蓋<img>標(biāo)簽內(nèi)容即可

如果是段落文字，只需要覆蓋<p>標(biāo)簽中的文字內(nèi)容即可。

這樣我們就能將SVG效果添加到模板中了。

以上就是本次推文的全部內(nèi)容啦

大家還有什么想看想學(xué)的

記得在評論區(qū)留言噢

對了大家有看什么

令你眼前一亮的工牌嗎？

歡迎留言討論哦