推荐适合元宵的SVG模版

宝藏模版

往期推荐（点击阅读）：

🤡推荐几个莫名好玩的SVG模版🤡http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247499869&idx=1&sn=04e2bf8de065795489bf9c391a249b5d&chksm=c3257867f452f1711458c70fd9640217df4264615d41e5d845b20d25c734794fbf52e8588bc5&scene=21#wechat_redirect

🤩推荐几个瞬间高大上的SVG模版🤩http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247500418&idx=1&sn=15aefb204ebce2c37e06923cc6878ce8&chksm=c3257ab8f452f3ae9e81c903ae5b72d27db81bf7f5083b7dd91ce5f1de11e8ebd73efc57b1ba&scene=21#wechat_redirect

🤗推荐几个敲级可爱的SVG模版🤗http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247500568&idx=1&sn=c5dddff9eedcebd7cd89062553d5cfd3&chksm=c3257b22f452f234901e12f3dad336bc6e0e9709a6194041ae511e382200c841f264e8b6ac94&scene=21#wechat_redirect

🧐推荐适合年终总结的SVG模版🧐http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247500978&idx=1&sn=b5dac2bbb42ea96ce009e7ae666a485d&chksm=c3257c88f452f59e243468883ef78920a924368523a498c591d826fe8c8447aa2746e70c88f3&scene=21#wechat_redirect

⏰推荐可无限循环的SVG模版⏰http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247501346&idx=1&sn=d710d2c78ca1b78f6e9df8084601637f&chksm=c3257e18f452f70e3f415f7e51392f5e136e9a889000f87bb70f863d3c4959bee6a5cb8f1ac6&scene=21#wechat_redirect

🧡推荐适合情人节的SVG模版🧡http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247501425&idx=1&sn=1a36c0cbeadf6159d0c0a5daa7752404&chksm=c3257e4bf452f75df59cd996d316a57ef5c71c48ccebe3a1b7910bd480d46244ff3e0337daeb&scene=21#wechat_redirect

🦋推荐适合女神节的SVG模版🦋http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247501771&idx=1&sn=b78ef0f6b1cf26c5d699b1ad2a9375f3&chksm=c3257ff1f452f6e7de80576d91f1f4789a95d008988ecc2b360e3ef732155e47fdd0df1d569a&scene=21#wechat_redirect

🦄推荐几个童趣满满的SVG模版🦄http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247504675&idx=1&sn=fa4846e82233fbf4365886dcb8e090a7&chksm=c3256b19f452e20f215192f15962ffc61afd34faeab09b332ab6792fbbb67544ad76f0ee3e31&scene=21#wechat_redirect

🤑618排版必备SVG模版🤑http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247505052&idx=1&sn=40d88344ea787fbfcdfe7d4597a02faa&chksm=c3256ca6f452e5b041deaba9838b1159bdec451d455d2ba9cd60e8db194a95cae7af58b08b2b&scene=21#wechat_redirect
🤠属于爸爸们的SVG模版🤠http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247505196&idx=1&sn=b3e267edfa44b86de7331e476f538d20&chksm=c3256d16f452e4008624efa170c4b6d2949be8dde287af4375eeaece0642305428230183e926&scene=21#wechat_redirect

🧈推荐几个无比丝滑的SVG模版🧈http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247501941&idx=1&sn=c2712155d98982ff987bf54b96dfe73b&chksm=c325704ff452f959bfdfba0f965d10b5a68e0291b0831adbd762da0780749a71f64086315480&scene=21#wechat_redirect

🥳推荐适合端午节的SVG模版🥳http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247504753&idx=1&sn=4d54ac852f8b24d7c84d5599c3a0aef3&chksm=c3256b4bf452e25d4a93a64d4c4970e701507d3d036449de00668640b344b8a303fe89951e7d&scene=21#wechat_redirect

👍6种「等分容器滑动」的妙用👍http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247502267&idx=1&sn=01b480999c5c23ae7b335aba8d33af0f&chksm=c3257181f452f897d569e4ef567a3cdaa63decd0593f670fafb4454f1be2e55a2bbf163ad514&scene=21#wechat_redirect

13种精妙的「图片轮播」特效http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247502512&idx=2&sn=48cc177719e085ea75a7c89af2a46781&chksm=c325728af452fb9cde6ad3af81903a6df5db1e2e2298462fc417b642911c8aafab5021a11788&scene=21#wechat_redirect

🤝推荐又红又专的SVG模版🤝http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247505253&idx=1&sn=15c7530f0fdb93384d0c902e42031c43&chksm=c3256d5ff452e44937b3adc112fec2d29248ef19423d1a35f6488883670a62c6ae5aa800e193&scene=21#wechat_redirect

🥮推荐适合中秋的SVG模版🥮http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247507310&idx=1&sn=68c8f93dcba81c9c536046bf6512400b&chksm=c3256554f452ec42a309406373227b2ba025396a997663e6ff18e8f4fee97050d6a942742884&scene=21#wechat_redirect

⌛推荐适合双11的SVG模版⌛http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247507878&idx=1&sn=825c65e01db3563260b3faa17a09c935&chksm=c325679cf452ee8a8d9de90d6d79ebb59ca25b8c00df7bd1968b0bd699466c91ae5af32def5e&scene=21#wechat_redirect

🥇推荐适合世界杯的SVG模版🥇http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247508291&idx=1&sn=b218b4078e9b0c07f9d2bb595a74518b&chksm=c3251979f452906f8411a40b0c961688b006aa604d96bf6ad4cc82ccfae7ee2bf2d4b54d55bf&scene=21#wechat_redirect

🤶推荐适合圣诞节的SVG模版🤶http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247508693&idx=1&sn=5f7d393903ddb0a41c02b8ce80d402b5&chksm=c3251aeff45293f96b3854ce03319d4c699de0ece4792473520357abd31dbd939460134ede8c&scene=21#wechat_redirect

🥳推荐适合新年的SVG模版🥳http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247509829&idx=1&sn=edda30215358a4249a8ac67cbe093db3&chksm=c3251f7ff452966911898061069f7576a5f370a4a75edf79edc57573d1cfcda96eb4ea97b906&scene=21#wechat_redirect

🧧推荐兔年春节的SVG模版🧧http://mp.weixin.qq.com/s?__biz=Mzk0NDIyMjU0OQ==&mid=2247510090&idx=1&sn=89b55d79fb4e5c48732e413cd71b1809&chksm=c3251070f4529966f9ed7a946f2e30f24bb64a118519fbe45a420ce473c6bd1493f1ba09bc1d&scene=21#wechat_redirect

各位黑科技编辑器会员，编辑器内 900+ 的 SVG 组件你们都用过吗？临近兔年元宵，各色具备解谜特性的交互 SVG 必将大放异彩，那么本期就具体来看看哪些组件值得应用吧！

宫格分栏+滑动模块

以玛莎拉蒂的《元宵节“拼”一把！》为例，将宫格与滑动结合，形成类似拼图的互动情景，能将产品图或海报以更具互动感的方式呈现给用户。

其搭建结构也非常简单。如一个九宫格的拼图效果，只需在「九宫格」组件各个嵌套区内放入「无限图片滑动」即可：

抽签特效+弹出式海报等

以定制（by 意符文化）案例宝马的《放开那个元宵》为典型，如果将某个或某几个抽签画面留空，露出下层的弹出式海报，则会形成另一种有趣的解谜式互动——长按画面，只有停留在特定序列才能点击弹出海报。

那么这种结构是如何实现的？结合「零高容器」，我们将下层互动（如弹出式海报）与抽签结构叠加即可：

至于留空的签，建议选择最后或相对接近最后的一个或几个签不传，避免交互层面存在误触问题。当然，宝马中国的原作属于定制案例，有更高频的序列帧刷新和更细节的画面分层设计。

这里重点在于启发各位读者们的思路——此处的弹出式海报，也可以替换为其他类型的互动。不妨大胆设想比如结合「任意动画接伸长」进行伸长接续，或者叠加「切换图片+播放音频」等形成更多自己的独创 SVG 设计。

GIF 控制器

如果品牌设计师已经制作了精妙的元宵动画，那么通过对 GIF 图的控制播放就足以形成优质的交互体验，如喜茶《元宵笑「盐」开，买一送一》中的灯谜翻转效果：

在 E2.COOL 的组件搜索功能内查找「GIF控制器」即可体验！一般来说，建议在 PS 中导出该 GIF 时设置为「仅一次播放」喔！

双面翻转

你也可以选择通过纯 SVG 代码执行的翻转去模拟猜灯谜的互动效果，以定制（by 交互实验室）案例荣耀的《正月十五，当元宵灯谜遇上谐音梗》为典型，它通过「放大消失」+「双面翻转」的效果组合形成了解谜的递进感。

我们同样通过「零高容器」的叠加能力模拟上述效果。由于双面翻转后需要画面可被点击前往无图标小程序，因此第二个零高容器应筛选成「穿透」式。小程序附着在最底层的背景图即可：

视差滑动

如果我们以月亮为切入点，同样可以打造曼妙的阅读氛围。这里尤其推荐参考 Vogue 的《古驰宇宙向你发来邀请》佳作，它基于 E2.COOL 黑科技 SVG 编辑器排版而成，通过视差滑动形成了裸眼 3D 般的互动感官：

标签抽拉

知名交互设计师 @GL 先生设计「标签抽拉」组件在元宵节中也可以作为猜灯谜的应用形式。以福特汽车的《元宵灯谜，「禽」您来猜》为例，它以多个谜题的谜底组合为线索，让产品广告有机融合到了节日活动中：

在编辑器组件搜索功能内查找「标签抽拉」即可体验！该组件为 UGC 原创组件，任何会员均可单独购买使用喔！

三折页立体广告

由知名新媒体艺术研究机构 JZ Creative Studio 独家授权至平台的「三折页立体广告」或许是在形态上最符合花灯的多图展示动画：

在编辑器组件搜索功能内查找「三折页立体广告」即可体验！其中的每张图片都可另外附加超链接，具备真正的 3D 视角轮播感官，结合适当的浮层设计就能形成花灯轮播的效果。

为确保画面变形的可控性，建议设计正方形的花灯图，然后结合你的实际花灯设计样式，利用「占位」组件完成轮播装置的定位：