方块工厂
可交互方块工厂自动化流水线系统(CSS+JS),支持自定义配置前端动画这是一款灵感来自工厂自动化的方块流水线交互系统,基于CSS前端动画与JS交互技术实现,还原了传送带、气动管道等真实工厂物流场景,方块可与设备、其他方块产生多种物理互动,视觉流畅治愈。支持开发者模...
桑基图
可交互全球咖啡供应链桑基地图 地球平面双模式数据可视化图表这是一款全球咖啡供应链流向可交互可视化图表,基于前端数据可视化技术实现,支持 3D 地球与平面地图双模式一键切换,搭配缩放、视图复位等便捷交互功能。图表以桑基流向形式,直观呈现全球咖啡主产区到...
玻璃态UI
纯 CSS 液态玻璃拟态 UI 组件套件,零依赖响应式前端 UI 开发资源这是一款纯 CSS 打造的液态玻璃拟态 UI 组件套件,基于原生 CSS 技术实现,全程零第三方依赖,无需额外引入框架即可快速上手。内置完整设计令牌系统、15 + 完成无障碍适配的常用 UI 组...
图形光波
Canvas彩色形状波鼠标交互动效,前端创意多状态网页背景效果这是一款彩色形状波交互式动效,基于 JavaScript+Canvas 技术实现,完整覆盖静止、鼠标悬浮、点击按压三种交互状态。静止时呈现低干扰的均匀微图形点阵,不抢页面核心视觉;鼠标悬浮时,对...
凹面无限图库
WebGL 交互式凹面畸变无限图片画廊,沉浸式前端创意交互效果这是一款沉浸式交互式无限图片画廊效果,基于 WebGL 技术实现,自带实时鼠标响应的向内凹面畸变特效,能呈现出包裹感极强的弧形曲面网格视觉效果。支持拖拽平移无缝图片矩阵、滚轮或键盘快捷导航,还可...
液态气泡
Liquid Glass液态玻璃气泡效果,Three.js实现的Metaball折射交互动画这是一款液态玻璃气泡效果,基于 Three.js + WebGL + Metaball 算法技术实现,模拟真实水泡的透明质感、光线折射与表面张力——气泡之间靠近时会自然"粘连融合",拖拽可实时交...
加载库
24种CSS+SVG加载动画合集,开箱即用的Loading效果库这是一款加载动画集合效果,基于 CSS Keyframes + SVG + 少量原生 JS 技术实现,内置 24 种风格各异的 Loading 样式——涵盖旋转圆环、弹跳圆点、进度条、波纹、沙漏...
磁铁感应
Three.js 软体球相互吸引与排斥物理模拟磁铁感应效果,并且带果冻质感弹性碰撞动效这是一款基于 Three.js 实现的软体相互吸引与排斥物理模拟效果。鼠标靠近时,两个球与鼠标箭头之间产生类似于磁铁的排斥感,两个半透明果冻球之间会有磁铁的吸引感,在接触时会产生真实的挤压形变,...
复古显示屏
CSS 复古 CRT 显示器故障效果,RGB 色差扫描线文字动效实现方案这是一款基于纯 CSS 实现的 CRT 老式显示器视觉效果。图中用 ASCII 字符拼出一只猫,叠加青色发光、RGB 通道错位(色差)两层处理,瞬间还原出八九十年代老显示器的那种"坏掉又没完全坏...
落叶飞舞
Canvas 粒子风吹飘落动效——可实时调参的树叶飞舞特效实现方案这是一款基于 JavaScript Canvas 实现的粒子流风吹漂浮动画效果。树叶在画面中随风飘动,每片叶子都有独立的运动轨迹,支持 2D 平面自旋和 3D 翻滚动画,配合湍流扰动,整体观感自...
滚动切换
WebGL 滚动驱动三维场景切换效果——五段几何形态无缝过渡实现方案这是一款基于 WebGL + SDF 光线步进技术实现的滚动联动三维渲染效果。页面滚动即驱动场景演进,依次呈现球体、圆环、立方体、八面体、双环五种几何形态,形态之间连续融合过渡,没有跳切感。配色...
圆弧滑块
GSAP全屏图片弧形自动滚动切换特效 | 景深模糊过渡的高端滑块组件这是一款全屏沉浸式图片切换效果,基于 GSAP + CSS 技术实现。切换时,下一张图片从背景虚化状态逐渐推近、聚焦,同时左侧大字标题跟随流畅过渡,背景色也随内容联动变换——整个过程一气呵成,有...