阅文无数,看了这么多的SVG黑科技,我只服这一种!
胖友们大家好啊,我是三儿。上周三儿跟大家介绍了《新媒体の颜色挑战》这篇SVG的制作方法,有胖友说看着挺高大上的,其实不就是一个点击换图的效果嘛?
没错!经常看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歌词海报、电影海报等。
好啦,以上就是三儿给大家介绍的点击换图的花式玩法了,大家还有没有什么创意的点子,快来留言区告诉三儿呀。
立即登录