液态气泡
Liquid Glass液态玻璃气泡效果，Three.js实现的Metaball折射交互动画这是一款液态玻璃气泡效果，基于 Three.js + WebGL + Metaball 算法技术实现，模拟真实水泡的透明质感、光线折射与表面张力——气泡之间靠近时会自然"粘连融合"，拖拽可实时交...
越轨滑块
会"越轨"的滑块拖动特效（CSS+JS） | 带物理引擎的趣味交互组件这是一款可脱轨的滑动条效果，基于 CSS + JS 技术实现。正常状态下它就是个普通的 MIN/MAX 滑块，蓝紫渐变轨道，拖动显示百分比，规规矩矩。但把滑块拖出两端边界后，它就彻底"不守规矩"...
横向图库
纯 CSS 实现的支持横向拖拽切换图片的响应式高端画廊这是一款基于 CSS 实现的横向图片画廊，支持左右滑动切换照片，最有意思的设计在于把滚动条本身当作分页进度条来用——底部那条绿色细线不是装饰，而是实时反映当前浏览位置的滚动指示器，一举两得。画廊...
交互同心圆
GSAP 鼠标跟随同心圆涟漪动画效果，适用于音乐播放器 UI等场景这是一款基于 GSAP 实现的交互式同心圆动效，多层嵌套圆环随鼠标移动产生错位追随，外圈流动着蓝粉渐变光晕，内圈呈现深邃的波纹扩散感，整体像一个悬浮发光的音响或虫洞入口，视觉冲击力很强。每层圆环...
WhatsApp UI
WhatsApp 风格聊天界面 UI 布局动效这是一款基于 GSAP + Three.js 实现的仿 WhatsApp 桌面端 HTML 布局界面，三栏布局还原度极高，聊天、状态、通话一览无余。最出彩的是背景——用 Three.js 着色器...
秒表
简约拟物风格精准秒表组件（CSS+JS）这是一款基于 CSS + JS 实现的高精度秒表组件，采用拟物化设计风格，圆盘表盘配合进度弧线，质感细腻有层次。计时精度上用 performance.now() 替代普通 Date.now()，...
渐变紫色背景
CSS 深紫渐变背景动画效果这是一款背景动画效果,基于CSS渐变技术实现。多层深紫色调在页面中缓慢流动切换,呈现出类似极光或星云般的视觉效果,整体氛围神秘而优雅。坦白讲,纯色背景太单调,图片背景又容易分散注意力,这种流动渐...
健身应用UI
健身数据追踪 APP UI 布局界面（HTML+CSS+JS）这是一款健身应用UI设计，基于HTML+CSS+JavaScript实现。界面采用深蓝渐变配色，包含首页数据看板、训练记录、个性化建议三个核心模块，通过环形进度条、柱状图、卡片列表等形式呈现运动...
电影卡片布局
纯 CSS 电影详情信息卡片界面，适用于影视类网站、视频平台、电影评分应用等需要展示媒体内容详情的场景这是一款使用纯 CSS 实现的响应式电影详情卡片组件，以经典电影《低俗小说》为展示案例。整个卡片采用深色系设计，左侧是电影海报图片，右侧完整呈现了电影的各类信息:片名、上映年份、时长、类型标签(...
图库
带视图过渡动画的创意图片（图库）布局效果（CSS+JS），图片切换预览带流动动效这是一款基于CSS view-transition API实现的超椭圆（Squircle）形状图片画廊效果，通过流体般的形态变化打造出独特的视觉体验。超椭圆造型是视觉亮点：整个画廊采用了介于圆形...
水波纹
Three.js 实现的 3D 流体水波纹交互动画效果这是一款基于Three.js组件库实现的3D流体背景特效。画面呈现出波浪状曲面，表面像丝绸般柔软起伏，背景是一张从紫色、粉色、红色、橙色到黄色自然过渡，配合白色立体文字"LIQUID EFFEC...
圣诞树
滑动开关创意圣诞树（CSS+JS）这是一款极具创意的“前端工程师专用”圣诞树交互效果，基于 HTML + CSS + JavaScript 技术实现。它别出心裁地将 UI 设计中常见的“开关按钮（Switch）”作为装饰元素，...