中秋浪漫滿(mǎn)分的SVG模板
寶藏模版
各位 E2.COOL 的會(huì)員，編輯器內(nèi) 1900+ 的 SVG 正版組件你們都用過(guò)嗎？中秋將緊隨國(guó)慶的腳步而來(lái)，在開(kāi)始閱讀本期推薦之前，你還可以收藏既往的多期合集：
第一期｜第二期｜第三期
上色式滑動(dòng)
月光如水，揮灑潑墨。《月圓圓圓圓圓圓圓圓圓圓》和《月圓人更圓》通過(guò)頂層滑動(dòng)的布局方式，從透明處映出月光，形成了巧妙的連續(xù)填色效果：
這種滑動(dòng)布局的巧思設(shè)計(jì)，是通過(guò) E2 編輯器「頂層滑動(dòng)」結(jié)合「縱向滑動(dòng)」，采用局部鏤空設(shè)計(jì)形成的。
點(diǎn)擊-切換圖片-伸長(zhǎng)
在案例《揭秘！月圓夜的大明星朋友圈》中，設(shè)計(jì)師通過(guò) E2 編輯器的「點(diǎn)擊-切換圖片-伸長(zhǎng)」既模擬了朋友圈的點(diǎn)贊效果，又體現(xiàn)了評(píng)論區(qū)的新增互動(dòng)：
除此以外，你還可以點(diǎn)擊閱讀《教程｜擬朋友圈式SVG交互設(shè)計(jì)》掌握更多逼真的朋友圈交互設(shè)計(jì)，通過(guò)這種擬態(tài)方式提升 SVG 效果的沉浸感。
任意點(diǎn)放大-消失+任意動(dòng)畫(huà)接伸長(zhǎng)
《有多少"圓"，就有多少種團(tuán)圓》和《「給月亮的詩(shī)」月圓，人團(tuán)圓》是 E2 編輯器中「任意動(dòng)畫(huà)接伸長(zhǎng)」的典型應(yīng)用：
關(guān)于它的具體應(yīng)用方法，既可以閱讀《一圖看懂虛擬元宵燈會(huì)SVG排版｜玩轉(zhuǎn)任意動(dòng)畫(huà)接伸長(zhǎng)》，也可以瀏覽優(yōu)秀的第三方解析視頻。
錯(cuò)層滑動(dòng)
中秋佳節(jié)的選題下，「錯(cuò)層滑動(dòng)」布局可謂經(jīng)久不衰，年年相見(jiàn)?！堆操p一輪明月》和《這個(gè)中秋，開(kāi)啟逐月「其」旅》正如此：
它的開(kāi)山鼻祖是第二屆 E2 編輯器 1024 節(jié)冠軍作品《月亮看見(jiàn)了》。關(guān)于這種滑動(dòng)布局的具體方法，建議觀(guān)看 Ceep 老師錄制的專(zhuān)題視頻。
可保存抽簽-長(zhǎng)按式
按一按屏幕，許愿自己獲得一張中秋幸運(yùn)簽！《臺(tái)風(fēng)都吹不走的中秋上上簽，快來(lái)抽！》的抽簽 SVG 互動(dòng)不僅可快速滾動(dòng)，還能保存為本地圖片：
在 E2 編輯器中，我們提供了大量的多形態(tài)抽簽組件，你還可以使用：
1）黑科技編輯器 | 幸運(yùn)抽簽-雙層教程
2）黑科技編輯器 | 幸運(yùn)抽簽-切換式教程
3）黑科技編輯器｜ 重復(fù)抽簽教程
4）黑科技編輯器 | 雙擊抽簽伸長(zhǎng)教程
5）黑科技編輯器｜視頻號(hào)跳轉(zhuǎn)美化抽簽教程
6）UGC原創(chuàng)上新｜幸運(yùn)抽簽-輪盤(pán)抽簽
7）黑科技編輯器｜幸運(yùn)抽簽-封面式教程
或直接點(diǎn)擊《SVG抽簽特效大全 | 黑科技編輯器》進(jìn)一步查看。
連續(xù)層層滑動(dòng)
《月滿(mǎn)情臻》案例是一種對(duì)「等分容器滑動(dòng)」組件的巧妙疊加應(yīng)用，給人以層層遞進(jìn)的瀏覽體驗(yàn)，并在最后銜接縱向滑動(dòng)或點(diǎn)擊伸長(zhǎng)：
請(qǐng)查看《GQ實(shí)驗(yàn)室同款連續(xù)層層滑動(dòng)+伸長(zhǎng)SVG教程｜E2編輯器教程》了解這類(lèi)布局的具體操作方法。
任意動(dòng)畫(huà)接播放GIF伸長(zhǎng)
如果品牌方設(shè)計(jì)師準(zhǔn)備好了精美的 GIF 動(dòng)畫(huà)， 那么也可以如《這個(gè)中秋，太出◎了》直接將多個(gè)「GIF控制器-漸隱」與「任意動(dòng)畫(huà)接伸長(zhǎng)」組合：
「任意動(dòng)畫(huà)接伸長(zhǎng)」是一種極大解放想象力的 E2 編輯器 SVG 套件，一些業(yè)內(nèi)經(jīng)典的趣味作品包括如《點(diǎn) 開(kāi) 即 玩 ← ↑ → ↓ 塞 爾 達(dá) 傳 說(shuō)》其實(shí)都基于此實(shí)現(xiàn)。
地圖多點(diǎn)游走縮放
這是一款由@2H發(fā)明的原創(chuàng) UGC 組件，《團(tuán)圓夜 水更甜｜粉絲問(wèn)答&中秋福利》基于它將產(chǎn)品廣告與中秋明月、水上花燈設(shè)計(jì)相結(jié)合：
這一組件的應(yīng)用面十分廣泛，在《我要開(kāi)始發(fā)瘋了?。。 分形覀円噙M(jìn)行了官方演示，這里還建議廣大會(huì)員學(xué)習(xí)以下 Ceep 老師錄制的案例分析視頻。
全屏飄落任意內(nèi)容+錯(cuò)層滑動(dòng)
想給畫(huà)面全屏增加中秋氛圍？《香香的中秋（放假倒計(jì)時(shí)9天）》采用了全屏飄落組件，給廣告長(zhǎng)圖瞬間增添了濃郁的節(jié)日氛圍：
除此以外，還可以點(diǎn)擊閱讀《SVG全屏特效大全，拿捏多樣氛圍感！》查閱更多精彩的 E2 編輯器全屏式 SVG 特效。
點(diǎn)擊-播放GIF-伸長(zhǎng)+預(yù)感應(yīng)無(wú)限圖片滑動(dòng)
喜茶在近期的《流心奶黃波波冰，回來(lái)啦！》中，通過(guò)精美的開(kāi)場(chǎng)動(dòng)畫(huà)引導(dǎo)用戶(hù)關(guān)注強(qiáng)勢(shì)回歸的高呼聲產(chǎn)品：
它的制作主要通過(guò)「點(diǎn)擊-播放GIF-伸長(zhǎng)」實(shí)現(xiàn)，內(nèi)部結(jié)合了優(yōu)雅的「預(yù)感應(yīng)無(wú)限圖片滑動(dòng)」，非常適合展示品牌動(dòng)畫(huà)的高質(zhì)量設(shè)計(jì)。
月餅組合-賀卡彈出
新華社的《轉(zhuǎn)發(fā)分享！每一塊都是祝?！肥怯蓮?fù)旦大學(xué)奇點(diǎn)新媒體研究中心設(shè)計(jì)制作的中秋主題創(chuàng)意 SVG 設(shè)計(jì)，作品指導(dǎo)老師計(jì)育韜基于「多熱區(qū)彈出式按鈕激活」進(jìn)行了特殊的代碼改造：
針對(duì)政務(wù)類(lèi)專(zhuān)項(xiàng) SVG 設(shè)計(jì)，不少機(jī)關(guān)單位目前就重大選題廣泛與復(fù)旦大學(xué)奇點(diǎn)新媒體研究中心開(kāi)展專(zhuān)項(xiàng)公益合作，如需聯(lián)系方式可私信與平臺(tái)管理員溝通。同時(shí)針對(duì)更多高校用戶(hù)，學(xué)生組織可點(diǎn)擊閱讀《全部SVG模版免費(fèi)用，E2編輯器高校機(jī)構(gòu)/公益組織會(huì)員長(zhǎng)期開(kāi)放申請(qǐng)》了解免費(fèi)獲取 E2.COOL 黑科技 SVG 編輯器全部會(huì)員功能的具體辦法。
月球科普交互
在《黑科技編輯器｜月亮拼圖游戲教程》中，我們介紹了一種基于「滑動(dòng)解鎖漸變-伸長(zhǎng)」的擬拼圖 SVG 交互，你可以滑動(dòng)下方指定位置體驗(yàn)：
此外也可以參考《拼圖互動(dòng)SVG教程｜E2編輯器教程》了解無(wú)伸長(zhǎng)的互動(dòng)模式。更多游戲化的黑科技排版效果請(qǐng)閱讀《????SVG小游戲大全????》了解。
我們還推薦你通過(guò)同屏互動(dòng)，基于「多熱區(qū)互斥開(kāi)關(guān)浮窗」實(shí)現(xiàn)月球表面的多點(diǎn)觸控浮窗，由此能承載更大的科普信息量。而關(guān)于數(shù)據(jù)可視化 SVG 的作品案例，近期還有《中國(guó)預(yù)制菜行業(yè)｜數(shù)據(jù)可視化報(bào)告（Deepseek/豆包生成）》值得一看，如需工程草稿可向原作者索要。
更多海量模板，平均不足 1 元！
E2.COOL 秉持著讓行業(yè)“人均 SVG”的生態(tài)理念，由多位黑科技排版設(shè)計(jì)的頭部資深開(kāi)發(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)谖恼麻_(kāi)頭和結(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條）