滑动轮播
纯 CSS 滚动式图文卡片轮播组件，带左右与底部指示点联动导航按钮这是一款纯CSS实现的轮播图效果，利用先进CSS属性 ::scroll-* 伪元素和容器查询技术，让当前展示项在滚动切换时自动触发动画，无需JavaScript即可完成流畅的视觉过渡。中间卡片放...
丝滑切换按钮
用视图过渡打造按钮丝滑切换体验（CSS+JS）这是一款带有平滑过渡效果的切换按钮，基于CSS view-transition 和 JavaScript 实现，点击时按钮会以“内容流动”的方式动态切换选中状态，视觉上像是文字和颜色在空间中自然...
萌萌下拉框
CSS自定义萌系猫咪主题下拉选择框（带尾巴联动选项选择效果）这是一款趣味十足的猫咪主题下拉选择器，基于纯 CSS 技术实现，把普通下拉组件做得既实用又治愈，点击时猫尾巴会自动“摆动”并展开选项，带来轻松可爱的交互体验。默认状态是只安静躺着的黑猫，一旦触发...
游戏角色卡片
3D翻转式霓虹玻璃质感RPG游戏角色卡：一张卡片，两种世界这是一款可翻转式玻璃态 RPG 角色卡片 UI，基于纯CSS3+原生JavaScript实现，把现代界面质感和游戏沉浸感结合得很巧妙，融合了玻璃拟态、霓虹光效和宇宙星空背景，打造出极具沉浸感的游...
图文轮播
中心焦点放大式图文轮播组件：让重点内容自动“站C位”（CSS+JS）这是一款中心放大式生产力卡片轮播，基于 HTML、CSS以及JS 技术实现（全程未依赖第三方库），采用连续无分页的“单轨道连续滚动”形式，中间活跃卡片会自动放大突出重点，两侧还能显示两张迷你卡...
美化下拉框
纯CSS自定义美化原生<select>下拉框：无需JS，也能优雅又实用这是一款纯CSS实现的自定义下拉选择器，通过样式覆盖原生<select>元素，打造了更美观、统一的交互体验。它没有依赖JavaScript，仅用CSS变量和伪元素实现了展开收起动画、选项高亮和状...
卡片边角
用CSS剪裁卡片倒圆角边框，打造高级感卡片边框设计这是一款带倒圆角的步骤引导卡片，基于CSS clip-path: shape() 技术实现，它把普通卡片的圆角做了 “倒切” 设计，视觉上比常规圆角更有新意、不单调，通过巧妙裁剪元素边缘，让卡...
骨架屏
移动端专用骨架屏加载动画（CSS+JS）：支持明暗模式及动态静态模式这是一款骨架屏加载效果，基于CSS+JavaScript技术实现，它把界面适配与加载体验结合得很实用 —— 既能切换浅 / 深色主题模式适配不同使用场景（比如夜晚用深色更护眼），又能用骨架屏在内...
滚动字幕
纯CSS实现的无缝无限字幕、图片及图标滚动效果这是一款纯CSS实现的平滑无限滚动字幕（Marquee）效果，通过内容复制与translateX(-50%)动画实现无缝循环，无需JavaScript。支持文本、图片以及图标混合内容，保持完美对...
展示海报
基于 sibling-* CSS 函数实现的海报图片错位渐显动画效果这是一款使用CSS sibling-* 函数实现的逐个错位亮相动画效果，展示五部宫崎骏经典动画电影海报。当点击其中一张海报时，其他未被点击的海报按序依次淡出页面，背点击的海报图片最终定格于页面中...
触手
Canvas BroadcastChannel 仿乌贼多触手鼠标跟随跨页动画效果这是一款基于Canvas与BroadcastChannel实现的“触手同步”视觉动画，多个浏览器窗口或标签页中的触手会实时联动，形成统一的动态效果。蓝色发光线条从中心球体向外延伸，模拟神经元或网...
音频按钮
CSS 科技感十足的霓虹光晕麦克风图标按钮效果这是一款 CSS 霓虹光晕麦克风音频按钮UI组件，它把麦克风功能按钮搭配了渐变霓虹光晕的背景，自带动态环形扩散动画，紫蓝调的光环质感柔和且带科技氛围，能清晰突出语音类功能的交互入口，适用于语音...