創(chuàng)意工牌新潮流：點(diǎn)擊換圖與滑動(dòng)SVG效果教程
探索如何通過點(diǎn)擊換圖和滑動(dòng)SVG效果為工牌增添趣味。本文詳細(xì)介紹了創(chuàng)意工牌的設(shè)計(jì)思路、制作方法以及SVG編輯器的使用技巧，讓你的工牌在社交媒體上脫穎而出，成為話題焦點(diǎn)。立即學(xué)習(xí)如何制作個(gè)性化且互動(dòng)性強(qiáng)的工牌，讓你的團(tuán)隊(duì)精神更加活躍
朋友們大家好，我是三兒
最近大家刷小紅書，有沒有刷到[同事工牌已經(jīng)next level]點(diǎn)進(jìn)去一看，好家伙大家精神狀態(tài)都這么美麗的嗎？
01.姓陳的同事叫：漲點(diǎn)工資成不陳同學(xué)
02.姓唐的同事叫：美式不加唐同學(xué)
03.姓李的同事叫：別和我講道李同學(xué)
04.姓杜的同事叫：遇事不決先百杜同學(xué)
05.姓鄭的同事叫：總有刁民想害鄭同學(xué)
06.姓吳的同事叫：每天都是星期吳同學(xué)
07.姓周的同事叫：工資太低只喝白米周同學(xué)
08.姓劉的同事叫：此地不宜久劉同學(xué)
09.姓曹的同事叫：再催就跳曹同學(xué)
作為新媒體人，看到這么有趣的話題咱們的網(wǎng)感雷達(dá)早就「滴答滴」響起來了。
內(nèi)容素材有了，該用什么樣的形式呈現(xiàn)呢？
我們一般有兩種思路，一是用點(diǎn)擊換圖，二是利用滑動(dòng)呈現(xiàn)。
點(diǎn)擊換圖，相對(duì)比較簡(jiǎn)單，做兩張尺寸相同的圖片即可，舉個(gè)列子。
▲點(diǎn)擊圖片換圖▲
多次點(diǎn)擊形狀（X形狀）過渡換圖
組件ID：754
▲點(diǎn)擊圖片換圖▲
多次點(diǎn)擊形狀（一字閉合）過渡換圖
組件ID：752
▲點(diǎn)擊圖片換圖▲
點(diǎn)擊換圖-自動(dòng)還原
組件ID：653
若是想要使用其他點(diǎn)擊換圖效果，我們可以在SVG編輯器中搜索「點(diǎn)擊換圖」，選擇我們喜歡的效果使用即可。
整體而言點(diǎn)擊換圖的圖片設(shè)計(jì)相對(duì)簡(jiǎn)單，確保尺寸一致即可，但如果用滑動(dòng)，需要考慮的就會(huì)多一些，舉個(gè)例子。
底圖固定雙層橫向滑動(dòng)-左右留白-滑動(dòng)圖可跳轉(zhuǎn)
組件ID：526
我們選擇了一個(gè)雙層滑動(dòng)，背景圖固定頂層滑動(dòng)。
背景圖
滑動(dòng)圖1
滑動(dòng)圖2
三兒，你中間這個(gè)圖也沒有內(nèi)容呀。
非也，因?yàn)檫@張圖是一直透明底的png圖，如果我們給他加上一個(gè)背景，你就能看到里面的內(nèi)容。
滑動(dòng)圖1
滑動(dòng)圖2
是不是這樣就看到內(nèi)容了，這個(gè)滑動(dòng)需要大家想明白的是，我們什么內(nèi)容需要用戶滑動(dòng)填充，就把該內(nèi)容單獨(dú)做一張圖出來。
例如這個(gè)案例，我們需要用戶將「鐘」字滑出來，那么背景圖就需要制作一個(gè)不含「鐘」字的內(nèi)容。
我們準(zhǔn)備好設(shè)計(jì)圖后，就能開始制作滑動(dòng)效果了。
在135編輯器左側(cè)，點(diǎn)擊SVG編輯器，進(jìn)入SVG編輯器頁面。
我們是一個(gè)橫向雙層滑動(dòng)效果，所以我們只需要選擇符合這個(gè)要求的組件即可，這里我們選擇的是底圖固定雙層橫向滑動(dòng)-左右留白-滑動(dòng)圖可跳轉(zhuǎn)組件ID：526
將組件添加進(jìn)編輯頁面，在右側(cè)添加對(duì)應(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效果添加到模板中了。
以上就是本次推文的全部?jī)?nèi)容啦
大家還有什么想看想學(xué)的
記得在評(píng)論區(qū)留言噢
對(duì)了大家有看什么
令你眼前一亮的工牌嗎？
歡迎留言討論哦
立即登錄
