Vue信用卡表单,卡面实时预览与翻转输入特效

卡面表单

Vue信用卡表单,卡面实时预览与翻转输入特效

输入卡号、姓名与有效期即可同步更新卡面,聚焦安全码时自动翻到背面,支持卡号格式遮罩与焦点高亮。

Canvas彩色气泡屏保,碰撞反弹与漂浮动画源码

漂浮气泡

Canvas彩色气泡屏保,碰撞反弹与漂浮动画源码

彩色透明气泡从左下方陆续进入,漂浮中变换色相、碰撞反弹,数量随窗口面积调整,无图片依赖。

JS旅行相册轮播,卡片沿曲线路径拖拽切换特效

曲线轮播

JS旅行相册轮播,卡片沿曲线路径拖拽切换特效

旅行照片沿弯曲公路排布,支持拖拽、按钮切换与点击选中,居中卡片放大并显示地点说明。

Three.js三维图表,柱状折线切换与数据编辑源码

三维图表

Three.js三维图表,柱状折线切换与数据编辑源码

三维柱状图与发光折线同屏展示,支持数据编辑、JSON与CSV导入、配色调整及透明背景PNG导出。

JS卡牌翻转展示特效,粒子光晕与悬浮交互源码

魔法翻牌

JS卡牌翻转展示特效,粒子光晕与悬浮交互源码

四张卡牌循环切换,点击翻面、双击悬浮,鼠标移动带动卡面倾斜,紫红蓝白粒子与光晕随卡牌变化。

CSS塔罗牌3D旋转轮播,点击翻面展示卡牌详情

暗夜塔罗

CSS塔罗牌3D旋转轮播,点击翻面展示卡牌详情

五张塔罗牌围成立体牌阵,左右切换旋转视角,点击卡牌翻面查看中文说明,配有暗色光晕与噪点氛围。

图片碎片拼合特效,SVG 裁剪路径驱动的方块聚合动画

碎片拼图

图片碎片拼合特效,SVG 裁剪路径驱动的方块聚合动画

四百个方块碎片从画面外飞回原位,一点点把完整图片拼出来,底部滑块可手动控制进度。

星空曲速穿梭特效,Canvas 手写透视的星流加速动画

星流加速

星空曲速穿梭特效,Canvas 手写透视的星流加速动画

星点从画面深处扑面而来,鼠标控制飞行方向,按住左键加速并拉出光带,像进入曲速航行。

星空曲速穿梭特效,Canvas 手写透视的星流粒子加速动画

星空穿梭

星空曲速穿梭特效,Canvas 手写透视的星流粒子加速动画

星点从画面深处扑面而来,鼠标控制飞行方向,按住左键加速并拉出光带,像进入曲速航行。

螺旋粒子动画,鼠标可控转向的 Canvas 三维旋涡特效

星河漩涡

螺旋粒子动画,鼠标可控转向的 Canvas 三维旋涡特效

数千个彩色光点绕中心盘旋着向外扩散,鼠标改变视角,按住可反转旋转方向,画面像一条星河。

手绘 Canvas 转流程图特效,浏览器端识别草图并生成规整节点

智能画板

手绘 Canvas 转流程图特效,浏览器端识别草图并生成规整节点

用画笔随手画方框、圆圈和箭头,点一下识别,笔迹就被替换成规整的节点与连线,可继续编辑。

滚动镜头推移特效,沿路径带着画面游走的 GSAP 长图导览

长图导览

滚动镜头推移特效,沿路径带着画面游走的 GSAP 长图导览

一张大图被当成场景,滚动时镜头沿着预设路径在图上游走,边走边缩放旋转,像手持拍摄。