我要验牌!连续点击洗牌切换效果来了

品牌时光机

发布于:2026-07-29

摘要:

扑克牌的洗牌动作,总是自带一种节奏感和期待感——一张接一张从指间滑过,每一次翻出都是未知的惊喜。


这个动态灵感,能不能用在公众号排版里?


当然能,戳:

抽抽抽抽抽抽抽抽抽抽抽抽卡牌

卡牌、卡片式的设计,排版用这4种切换更有动感


今天再给大家带来一个好玩的效果——连续点击洗牌切换


点击后图片从卡牌下面翻转滑出,像抽洗扑克牌一样依次滑过,极具节奏感和空间动态感,更适合卡片式、卡牌式的设计场景。


这个效果分为左、右、上、下4个方向,下面为大家展示左、右洗牌效果。


来,点击「验验牌」:


 

图片                            


*素材来自迈凯伦官方账号勒芒荣耀,漆刻永恒

组件:连续点击-洗牌切换(右、有触发区)

编号:11312(组件)

 

图片                            


*素材来自迈凯伦官方账号勒芒荣耀,漆刻永恒

组件:连续点击-洗牌切换(左、有触发区)

编号:11311(组件)

击洗牌切换带着连续的动态节奏,一整套过渡动画极其丝滑。如果你的内容需要展示多张案例、多个产品、多组数据,这个效果可以为读者带来不一样的视觉体验。


一起跟着教程来尝试一下吧。



详细教程:


工具:i排版SVG编辑器,网址:SVG.iPaiban.com

组件:连续点击-洗牌切换(右、有触发区)

编号:11312 (组件)


第1步:选择组件


登录i排版SVG辑器后,点击编辑器左侧「组件」按钮,在「点击」-「翻转切换」分类中找到「连续点击-洗牌切换(右、有触发区)」组件,或者直接搜索组件编号11312,点击选择。


图片


第2步:上传图片素材


点击右侧「换图」按钮上传背景图,点击「+」号上传多张切换图。


图片


所有图片尺寸需保持一致,为了更好的视觉呈现效果,切换图四周建议留出空白空间,以便露出背景图,如下所示:


图片


第3步:调整动画时间


上传好素材后,调整切换动画的时间。其中「第一个动画时间」表示抽出的动画时间,「第二个动画时间」表示抽出后放回的动画时间。


图片


第4步:设置触发区域


双击编辑区的图片,在弹出的窗口中红色色块表示触发区域,可任意调整位置和大小。


图片


第5步:导入公众号后台


点击最右侧「预览草稿」扫码预览效果,效果满意后点击同步至微信后台同步到自己的公众号就可以了。


图片


使用同步功能不用频繁在编辑器和微信后台切换,同步成功后可以立即扫描二维码预览在公众号的效果。


如需局部导入可参《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。




制作SVG交互图文认准i排版SVG编辑器,网址:SVG.iPaiban.com,复制网址在 PC 端谷歌浏览器打开,即可注册,编辑器所有组件/组合现已全部支持免费试用了。

新用户在「新手礼包」可领取3天企业标准版会员免费商用,以及22个常用必备组件的大礼包(1年)。随礼包附赠千元优惠券,每单最高立降500元。