宝藏模版
往期推荐(点击阅读):
趣味效果|高大上|可爱风|年终总结I|年终总结II|循环特效|情人节I|情人节II|妇女节|儿童节I|儿童节II|儿童节III|618I|618II|父亲节|丝滑动画|端午节I|端午节II|滑动妙用|图片轮播I|图片轮播II|又红又专|中秋节I|中秋节II|双十一I|双十一II|世界杯|感恩节|圣诞节I|圣诞节II|新年|兔年春节|元宵节|愚人节|杂志范儿|520/521I|520/521II|五一旅游I|五一旅游II|母亲节I|母亲节I|多巴胺|微博|夏日氛围|大唐国风|反诈宣传|七夕节|CityWalk|开学季II|开学季II|校园主题|揭露丑恶真相|运动会I|运动会II|十一|万圣节I|万圣节II|冬季氛围|新闻宣传|春节红包I|春节红包II|龙年春节|开工新品|地球日|问答题
各位黑科技编辑器的会员,编辑器内 1700+ 的 SVG 正版组件你们都用过吗?元宵将至,福运满盏,让我们用灵动的 SVG 交互为读者带去最真挚的祝福吧!
填写祝福+放飞孔明灯(逆反盒子)
我们在《黑科技编辑器|孔明灯祝福+放飞SVG教程》中,巧妙利用神奇的「逆反盒子」和「可输入文本」组件,打造了浪漫的孔明灯祝福书写与放飞游戏:
该效果的排版方式有一定操作难度,建议浏览下方视频开展操作。也可以咨询平台管理员获取云端草稿工程文件。
模拟猜灯谜(单图跌落)
海底捞公众号的《剧透!海底捞的「元宵游园会」里都有啥?》中,共有两组模拟猜灯谜的 SVG 互动——第一组为两个「三分栏」,每个栏内使用「单图跌落」;第二组为「点击切换」,简洁明了体现了灯谜到谜底的变化:
模拟猜灯谜(放大+翻转)
《正月十五,当元宵灯谜遇上谐音梗》通过「任意点放大+双面翻转」两个 SVG 模版的组合,我们可以进一步优化猜灯谜的交互体验:
你可以点击《黑科技编辑器|翻花灯猜谜(任意点放大+双面翻转)SVG教程》具体学习这套黑科技排版操作方式。
元宵场景无限穿越+灯谜翻转(任意动画接伸长)
去年我们黑科技 SVG 编辑器官方发布了《点 击 进 入 虚 拟 元 宵 灯 会》,其中既有无限穿梭的镜头特效,又有层叠交错的翻转互动:
如果你希望学习这套沉浸感极佳的 SVG 作品,可以点击阅读我们的解析《一图看懂虚拟元宵灯会SVG排版|玩转任意动画接伸长|E2.COOL》。也可以咨询平台管理员获取云端草稿工程文件。
灯谜填写(密码解锁)
在长安银行公众号的《首刷有礼|玩趣元宵解锁好礼》中,灯谜以更具象的解迷游戏展示,核心应用到的是 SVG「黑科技编辑器|密码解锁教程」类型的互动:
即刻前往黑科技编辑器,在「企业专区(组件)」大类中找到「密码解锁」畅快体验!编辑器还提供了「密码解锁-伸长」进阶组件供你实现更丰富的效果。
贺卡弹出(多热区弹出式海报)
保时捷公众号《前方「兔」袭,闹元宵!》则以精彩的元宵动画开场,衔接横向滑动并支持弹出海报图:
如果你也准备了趣味的元宵主题动画,同样可以通过「图片消失_滑动出现(GIF版)」开场,随后采用等分容器滑动将「多热区弹出式海报」嵌套其中,具体布局方法可参考:
花灯轮转(滚动广告-可弹出式)
在「滚动广告-可弹出式」表面叠加镂空图层,我们还可以通过 SVG 模拟花灯轮转效果,点击下方画面查看:
它不仅能生动展示品牌方设计的多个元宵主视觉,还能弹出变化为贺卡祝福,具体布局方法可参考下图。也可以咨询平台管理员获取云端草稿工程文件:
连续切换
如《元宵节|猜灯谜共团圆》所示,把点亮花灯和切换谜底分成两个步骤处理,通过「连续切换」SVG 组件即可轻松实现:
EMOJI灯谜(多重点击伸长)
将伸长类组件多次使用,可以形成纵向的连续组合布局。在《元宵节,就酱过!》和《新春百花争斗艳,元宵灯谜乐团圆》中,EMOJI 灯谜通过「点击-伸长」引导用户思考,形式简洁但不减丝毫乐趣:
音画同步特效(伪音频视频)
将 GIF 与音效同步,《正月十五 | 吃元宵 最开鑫》采用了「黑科技编辑器|GIF播放器+伪音频视频SVG教程」的黑科技排版方式将动态与声音无缝融合:
这里你需要提前准备一个有声音无画面的视频作为排版素材,即刻前往黑科技编辑器,在「音频」大类中找到「GIF播放器+伪音频视频」畅快体验!更多精彩的音频类 SVG 交互创作可以回看 Ceep 老师的专题分享。
夹元宵游戏(序列帧/抽签+弹出式海报)
宝马公众号《放开那个元宵》的原理并不复杂,本质是将序列帧/抽签型组件叠放于「弹出式海报」表面,并留空一个瞬间不传序列,露出下方的弹出海报结构:
这两者的叠加可以通过「零高容器」实现,当然记得序列帧或抽签组件一定要选「长按」式噢:
打印门票-展开
游园会的门票准备好了吗?点击画面即刻出票!莫斯利安公众号的《这个元宵节,莫斯利安邀你“云”上游园,探味大福年》从一张门票开启,打造了趣味的元宵主题乐园:
这里建议参考「黑科技编辑器|打印门票-伸长SVG教程(点击进场-伸长)」实现打印门票的黑科技排版特效,内部则可以采用编辑器内各色丰富的切换效果来呈现灯谜。
更多海量模板,平均不足 1 元!
黑科技编辑器秉持着让行业“人均 SVG”的生态理念,由多位黑科技排版设计的头部资深开发者共同打造,斩获包括法国设计奖、美国缪斯创意设计奖等诸多国际赛事大奖,帮助更多品牌以可视化形式完成互动式图文创作。如有任何特效灵感和建议,也欢迎通过客服向我们提出,编辑器将竭诚思考代码转化的可行性。
E2 平台官网
会的比别人多一点