如何像人民日報一樣『點亮武漢』?
相信大家今天都被人民日報的一篇推文刷屏了吧!這篇推文羅列出武漢的著名景點,將他們做成SVG動態(tài)效果,用戶可以通過點擊,達(dá)到點亮的效果
嘿,胖友們大家好呀,我是三兒。
相信大家今天都被人民日報的一篇推文刷屏了吧!這篇推文羅列出武漢的著名景點,將他們做成SVG動態(tài)效果,用戶可以通過點擊,達(dá)到點亮的效果。
為了方便胖友們的觀看,三兒將這些圖做成了動圖,胖友們可以通過滑動來進(jìn)行查看哦!
怎么樣,是不是超級炫酷。這篇推文一經(jīng)發(fā)出,瞬間刷爆全網(wǎng),短時間內(nèi),取得了閱讀在看雙破10萬+的成績。
不少胖友紛紛來找三兒,詢問這種推文是如何制作的。
這個簡單,今天三兒就來教你們?nèi)绾沃谱靼桑?/span>

圖片切換樣式
ID:97878
【樣式介紹】:在樣式中點擊上方的圖片,可以顯示下方的圖片??梢源钆錈o縫圖片樣式制作更有趣味性的推文。
【可調(diào)整參數(shù)】:更換圖片、更改圖片尺寸。
【這些樣式也可以用這個教程哦】樣式ID:97481
圖片切換樣式ID:97878
由于編輯器升級了專業(yè)版,簡化了部分svg樣式的操作流程,使得修改svg樣式大部分參數(shù)無需再通過html代碼實現(xiàn)。本點擊樣式所有參數(shù)都可通過動畫設(shè)置調(diào)整。
將編輯器切換到專業(yè)版模式,點擊樣式區(qū)域彈出對話框,在【全局樣式】中點擊動畫按鈕,開始修改SVG樣式參數(shù)。
這里需要注意的是:不是所有樣式都有動畫選項哦,只有SVG樣式會有動畫顯示!
1.上傳圖片
首先,我們需要將圖片上傳至135編輯器中。選擇編輯區(qū)上方的圖片上傳按鈕,選擇你制作好的圖片(兩張圖片需尺寸一樣),點擊上傳按鈕。
圖片上傳成功后,我們需要復(fù)制圖片的地址才能夠使用圖片。
在135編輯器中,找到左側(cè)的『圖片素材』,在這里保存著你所在135編輯器中上傳的圖片。找到你剛上傳的圖片素材,點擊下方的復(fù)制按鈕,即可復(fù)制圖片的地址。
2.使用樣式
點擊『顯示底圖樣式』,選擇專業(yè)版編輯器菜單中的『動畫』按鈕,進(jìn)入到『動畫』編輯界面。
在這里,我們可以對整個樣式進(jìn)行修改。胖友們只需要將剛才保存的圖片地址粘貼至圖片鏈接中即可。
為了方便胖友們的操作,在動畫編輯區(qū)域我們新增了動畫展示框,胖友們完成圖片的設(shè)置后,可以在右側(cè)的展示區(qū)里點擊樣式查看效果哦!
Tip:這里需要注意的是,樣式中使用的兩張圖需要大小一致,否則會使樣式點擊后顯示有問題。
3.修改樣式代碼
有胖友可能要問了,那如果我的圖片不是豎版的該怎么辦呢?
別急,三兒來教你通過修改代碼來解決!
首先將我們的樣式插入至135編輯器中,選中樣式后點擊HTML代碼進(jìn)入代碼編輯界面。
找到三兒標(biāo)注出來的地方,將數(shù)字改為你圖片的大小就可以開始按照上面的步驟進(jìn)行修改了。
PS:不知道你圖片的大小是多少?雙擊圖片后選擇『插入遠(yuǎn)程圖片』,右側(cè)就會顯示這個圖片的具體尺寸哦!
3.修改持續(xù)時間
“我想讓點擊后的動畫時間長一點,該如何制作呢?”
這個就更簡單啦,還是需要通過『修改HTML代碼』來實現(xiàn)哦,不過這次只需要更改一個數(shù)字就可以了!
首先,一定要先選中我們的樣式,然后點擊『HTML代碼』按鈕。
然后找到 dur="2s" 這行代碼,將里面的數(shù)字『2』更換為你想要讓動畫顯示的時長,即可完成。
注意事項:

這里需要注意的是,排版完成后的推文需要使用135編輯器的保存同步功能,如果使用復(fù)制粘貼功能會導(dǎo)致樣式失效哦!
以上就是本期的全部內(nèi)容啦
胖友們都學(xué)會如何修改了嗎?
想學(xué)習(xí)如何在這個樣式中
添加炫酷的動圖嗎?
去二條看看!
- 恰飯時間 -
想學(xué)習(xí)更多SVG創(chuàng)意推文嗎?
想排出一篇你老板都說妙的推文嗎?
想靠著SVG升職加薪嗎?
那你還等什么!
趕快來參加最新一期的社群小課吧!
本次社群小課,我們邀請到了135編輯器主編巖植,和大家分享如何利用svg樣式,做出好玩有趣的互動排版,希望你可以通過這個課程,偷學(xué)借鑒排版思路,看看同一個svg樣式,別人是怎么玩出新意來的。
Tips:135課堂年卡用戶免費參加哦~
福利時刻-免費領(lǐng)取7天135編輯器VIP會員】
點擊http://ptgmusicacademy.com/users/invite/ddb12a17ce400c35fe041d275a578351,注冊135編輯器,即可獲得7天VIP會員
立即登錄

- 知乎熱議:微信公眾號如何快速漲粉?
- 0基礎(chǔ)運營小白學(xué)習(xí)什么新媒體課程比較好?
- 新媒體,自媒體新人必學(xué)的課程有哪些?
- 不懂就問:新媒體運營應(yīng)該怎樣學(xué)習(xí)?













