阅文无数,看了这么多的SVG黑科技,我只服这一种!

胖友们大家好啊,我是三儿。上周三儿跟大家介绍了《新媒体の颜色挑战》这篇SVG的制作方法,有胖友说看着挺高大上的,其实不就是一个点击换图的效果嘛?

image.png


没错!经常看GQ实验室、三三星球、卡地亚、喜茶这些大号的胖友们应该有发现,现在很多文章里看起来很酷炫又唬人的SVG都可以归纳为点击换图效果。


像前两年人民日报爆火的《点亮武汉》、135编辑器里的答题SVG、抽签SVG等等也都是由点击换图效果演变来的。


今天三儿就来跟大家盘点10个有趣又好玩的点击换图玩法,只有你想不到,没有SVG玩不了的




SVG使用须知


使用以下SVG需要通过135编辑器左侧入口进入SVG编辑器;



在SVG编辑器中搜索ID或者关键词,找到对应的SVG组件进行使用;



鼠标移动到SVG组件上,可以查看SVG的使用教程,也可以扫码预览SVG的具体效果。





点击抽签


·





ID:79


效果介绍:点击抽签封面图,封面图消失,签文自动滚动,点击滚动停止,随机出现一张签文图片。



点击翻转卡片


·


ID:80


效果介绍:点击图片,触发翻牌效果,显示另外一张图。



点击翻书


·


ID:81


效果介绍:设置触发区域,以翻书的形式实现图片的切换,可以进行多张图片的切换。


点击左右开门


·


ID:82


效果介绍:点击上层两张图片,图片分别向左右两边打开,露出底图。


点击放大拍照


·





ID:83


效果介绍:点击模拟拍照效果切换图片,底部的图片自动放大,可以用于放大图片查看细节等创意。


水波式点击换图


·


ID:116


效果介绍:点击A图,A图渐隐消失消失B图,切换过程中出现圆形波纹扩散的效果。


毛玻璃点亮图片


·


ID:124


效果介绍:点击图片,毛玻璃遮罩效果竖向移出,可设置上下移出方向和毛玻璃清晰度。


黑白滤镜点亮图片


·


ID:125


效果介绍:点击图片,黑白遮罩效果竖向移出,可以设置上下移出方向。


多次点击放大换图


·
·


ID:161


效果介绍:多次点击切换多张图片,每次点击后的图片以放大的方式出现。可以用作局部细节放大等创意图文。


多图点击竖向移入


·
·

·

·

·


ID:167


效果介绍:点击A图,A图移出B图移入,以此类推,移动方向为竖向,可以设置背景。这种效果可以制作成SVG歌词海报、电影海报等。


好啦,以上就是三儿给大家介绍的点击换图的花式玩法了,大家还有没有什么创意的点子,快来留言区告诉三儿呀。


·EN

文章排版由135编辑器提供技术支持

 ■ ■ 

文章评价
登录后可以评论
立即登录
分享到