適合端午節(jié)的SVG模版（第Ⅲ期）
寶藏模版
E2 編輯器往期推薦（點(diǎn)擊閱讀）：
趣味效果｜高大上｜可愛風(fēng)｜年終總結(jié)I｜年終總結(jié)II｜循環(huán)特效｜情人節(jié)I｜情人節(jié)II｜情人節(jié)IIII｜婦女節(jié)I｜婦女節(jié)II｜兒童節(jié)I｜兒童節(jié)II｜兒童節(jié)III｜618I｜618II｜父親節(jié)｜絲滑動(dòng)畫｜端午節(jié)I｜端午節(jié)II｜滑動(dòng)妙用｜圖片輪播I｜圖片輪播II｜又紅又專｜中秋節(jié)I｜中秋節(jié)II｜雙十一I｜雙十一II｜世界杯｜感恩節(jié)｜圣誕節(jié)I｜圣誕節(jié)II｜新年｜兔年春節(jié)｜元宵I ｜元宵節(jié)II｜愚人節(jié)I｜愚人節(jié)II｜雜志范兒｜520/521I｜520/521II｜520/521Ⅲ｜五一I｜五一II｜五一III｜母親節(jié)I｜母親節(jié)I｜母親節(jié)III｜多巴胺｜微博｜夏日氛圍｜大唐國(guó)風(fēng)｜反詐宣傳｜七夕節(jié)｜CityWalk｜開學(xué)季II｜開學(xué)季II｜校園主題｜揭露丑惡真相｜運(yùn)動(dòng)會(huì)I｜運(yùn)動(dòng)會(huì)II｜十一｜萬(wàn)圣節(jié)I｜萬(wàn)圣節(jié)II｜冬季氛圍｜新聞宣傳｜春節(jié)紅包I｜春節(jié)紅包II｜龍年春節(jié)｜開工新品｜地球日｜問(wèn)答題｜人工智能｜踏青出行｜五四青年節(jié)
各位 E2.COOL 的會(huì)員，編輯器內(nèi) 1700+ 的 SVG 正版組件你們都用過(guò)嗎？在開始閱讀本文之前，你還可以查看此前端午專題的匯總：
推薦適合端午節(jié)的SVG模版 <br/>第Ⅱ期｜ 適合端午節(jié)的SVG模版
密碼解鎖-伸長(zhǎng)
以端午日期為線索，《輸入開箱密碼 >>>》采用「密碼解鎖-伸長(zhǎng)」的方式開啟圖文：
值得一提的是，本作的密碼解鎖素材應(yīng)用了 GIF 動(dòng)態(tài)，滾動(dòng)的數(shù)字比表盤讓互動(dòng)更具真實(shí)感！
幸運(yùn)抽簽-點(diǎn)擊式
粽子的款式選擇，是端午節(jié)不變的全民話題。人民日?qǐng)?bào)的《今日端午》以 SVG 交互抽簽形式，讓用戶獲取屬于自己的幸運(yùn)祝福：
該作以封面向上移動(dòng)開場(chǎng)，隨后點(diǎn)擊停止抽簽。其具體布局方式非常簡(jiǎn)單，以下為 E2 編輯器中的參考示意：
錯(cuò)層滑動(dòng)
在霸王茶姬公眾號(hào)的《茶香粽香，端午的福利更香！》和復(fù)旦大學(xué)公眾號(hào)的《復(fù)旦er，你的“粽”來(lái)了！》中，一方小巧的龍舟徽印懸浮其中，文章滑動(dòng)時(shí)它在粽葉、文案、產(chǎn)品之間穿梭：
這是經(jīng)典的 E2 編輯器「錯(cuò)層滑動(dòng)」布局，在不同專題都有極佳的通用性。建議編輯器新人通過(guò) Ceep 老師錄制的專題視頻進(jìn)行入門學(xué)習(xí)。
層層滑動(dòng)接伸長(zhǎng)
層層滑動(dòng)接伸長(zhǎng)是由知名開發(fā)者 GL 和@計(jì)育韜 老師共同發(fā)明的互動(dòng)形式，獨(dú)家正版上架 E2 編輯器中?！抖宋?| 賽龍爭(zhēng)先，還看今朝》開場(chǎng)左右剝離粽葉點(diǎn)擊展開畫面，十分符合剝粽子的動(dòng)作體驗(yàn)：
在 E2.COOL 內(nèi) UGC 專區(qū)點(diǎn)擊「層層滑動(dòng)接伸長(zhǎng)」直接單獨(dú)購(gòu)買該 SVG 特效。如果沒有圖文展開需求，則也可以通過(guò)「層層滑動(dòng)」組件進(jìn)行排版設(shè)計(jì)。
點(diǎn)擊撤場(chǎng)伸長(zhǎng)
阿爾法羅密歐公眾號(hào)的《吃粽子了嗎？（低息好“利”端午大放“粽”）》采用開幕形式的開場(chǎng)，并展開多組滑動(dòng)效果：
多熱區(qū)無(wú)限浮現(xiàn)-關(guān)閉
瀘州老窖公眾號(hào)的《香囊傳情，舉杯端午》在畫面內(nèi)設(shè)計(jì)了多組粽型掛飾，點(diǎn)擊后出現(xiàn)浮窗卡片并支持關(guān)閉。同理，雷克薩斯公眾號(hào)《開“香”時(shí)間》也采用它創(chuàng)作了開啟香囊的 SVG 互動(dòng)：
這一效果，需通過(guò) E2 編輯器中「多熱區(qū)無(wú)限浮現(xiàn)-關(guān)閉」組件實(shí)現(xiàn)。你還可以通過(guò)第三方發(fā)布的專題視頻了解該組件其他 SVG 創(chuàng)意排版形式。
圖書翻頁(yè)接伸長(zhǎng)
《古詩(shī)里的端午》則聚焦詩(shī)詞文化，以連續(xù)的翻頁(yè)為開場(chǎng)展示不同的詩(shī)詞佳作，隨后展開圖文內(nèi)頁(yè)：
在 E2.COOL 內(nèi)還有大量具備翻轉(zhuǎn)特性的 SVG 特效可供選擇：
黑科技編輯器 | 日歷翻頁(yè)教程
黑科技編輯器 | 計(jì)分牌翻頁(yè)教程
黑科技編輯器 | 雙面翻轉(zhuǎn)教程
黑科技編輯器｜雙面傾斜翻轉(zhuǎn)（左右）教程
黑科技編輯器｜翻花燈猜謎教程
黑科技編輯器 | 點(diǎn)擊翻頁(yè)-伸長(zhǎng)教程
黑科技編輯器｜互斥翻牌教程
UGC 原創(chuàng)設(shè)計(jì)介紹｜手帳翻頁(yè)
此外，對(duì)于多組知識(shí)/廣告信息的組合呈現(xiàn)，我們還推薦如「SVG 撲克出牌」這樣的 E2 編輯器獨(dú)創(chuàng)組件進(jìn)行設(shè)計(jì)。
一條線軌跡動(dòng)畫
快手科技的《2023端午節(jié)，這個(gè)粽子千萬(wàn)別亂拆！》采用了屢試不爽的 SVG 一條線動(dòng)畫，將手繪、文案、照片通過(guò)矢量軌跡的勾勒進(jìn)行串聯(lián)：
如何在 E2 編輯器中實(shí)現(xiàn)一條線的部署？你可以點(diǎn)擊閱讀《熱門SVG｜一條線動(dòng)畫，串聯(lián)空間/時(shí)間/你我他》了解，并查看完整操作錄像。
地圖多點(diǎn)游走縮放
宜昌發(fā)布的《為什么是宜昌？》以端午文化科普為導(dǎo)向，將五大端陽(yáng)風(fēng)俗以地標(biāo)方式設(shè)計(jì)于手繪畫面中，點(diǎn)擊后放大浮現(xiàn)知識(shí)卡片：
這是由知名開發(fā)者 @2H 老師發(fā)明的「地圖多點(diǎn)游走縮放」SVG 模版實(shí)現(xiàn)，它也能廣泛應(yīng)用于各色產(chǎn)品置景、數(shù)據(jù)可視化圖表等選題，由 Ceep 老師錄制的兩期專題教學(xué)。
更多海量模板，平均不足 1 元！
E2.COOL 秉持著讓行業(yè)“人均 SVG”的生態(tài)理念，由多位黑科技排版設(shè)計(jì)的頭部資深開發(fā)者共同打造，斬獲包括法國(guó)設(shè)計(jì)獎(jiǎng)、美國(guó)繆斯創(chuàng)意設(shè)計(jì)獎(jiǎng)等諸多國(guó)際賽事大獎(jiǎng)，幫助更多品牌以可視化形式完成互動(dòng)式圖文創(chuàng)作。如有任何特效靈感和建議，也歡迎通過(guò)客服向我們提出，E2 將竭誠(chéng)思考代碼轉(zhuǎn)化的可行性。
E2 平臺(tái)官網(wǎng)
https://www.e2.cool/
會(huì)的比別人多一點(diǎn)
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
暫無(wú)評(píng)論哦，快來(lái)評(píng)論一下吧！
全部評(píng)論（0條）