流动水珠
CSS+SVG液态玻璃水珠装饰文本效果这是一款纯HTML+CSS+SVG实现的“液态水珠”文本装饰效果,通过巧妙的渐变、阴影和变形动画模拟出真实业态水珠效果,文字仿佛悬浮在透明液滴中,鼠标点击产生自然波动,通过拖拽右下角可以将水滴分...
脉冲光波
WebGL+Canvas实现极具冲击力的脉冲光波动画效果这是一款基于WebGL+Canvas实现的脉冲扩散动画效果,通过图形之间的无限过渡变化形成从中心往四周扩散的脉冲动画效果,形成光环从中心点极速扩散的冲击脉冲光波,视觉效果拉满,极具冲击力,适合科...
交互卡片
带倾斜与弹跳翻转效果的科技感 3D 互动卡片(CSS+JS)这是一款带有悬停倾斜与弹跳翻转交互的 3D 卡片组件,基于JS+CSS实现,用户在悬停时卡片会呈现自然的 3D 倾斜质感,点击后还能触发翻转 + 弹跳的轻微弹性反馈,增强空间感和操作反馈。视觉上...
标签播放动画
基于纯 CSS 实现标签组按顺序陈列动画效果,支持动态添加新标签这是一款基于CSS sibling-index() 函数实现的顺序动画效果,它支持添加新标签项,点击动画按钮后,能够根据元素在父容器中的排列顺序自动控制动画播放时序,无需JavaScript干预...
动态流程节点
动态路径连接图标节点(流动节点) SVG + CSS 动画效果,支持节点高亮、停顿以及图标配置这是一款带节点停顿的 SVG 路径连线动画效果,基于 SVG+CSS 动画技术实现 —— 它能让多个图标节点通过动态路径依次连接,还会在每个节点处稍作停顿,突出当前选中节点并伴随高亮反馈。这种设...
鼠标操控绳子
GSAP+SVG实现线条随鼠标晃动,松开线条弹性抖动效果这是一款 GSAP+SVG 光标跟随线条抖动效果,基于 GSAP 动画库与 SVG 技术实现,页面中央横放着一条渐变绳子,会跟随鼠标光标的移动产生自然的跟随抖动动画,适用于极简风格网页的装饰元素...
极光雪球
极光雪花球沉浸式互动梦幻背景(p5.js+JS),流动的极光色彩渐变,搭配飘落的雪花粒子!这是一款极光雪花球沉浸式互动背景效果,基于原生 JavaScript 结合p5.js开源组件与 CSS 动画技术实现,它模拟了身处旋转极光雪花球内部的梦幻场景 —— 滚动页面能缩放视角查看完整的...
点阵时钟
原生CSS+JS实现的创意极简点阵时钟,靠不同颜色的点和条对应时分秒来指示时间这是一款极简风格的点阵时钟,基于原生 CSS 自定义属性与 JavaScript 技术实现,仅用彩色圆点和刻度表示时间,通过不同颜色和位置区分时、分、秒,视觉干净利落,毫无冗余。中央数字时间可自...
水晶球景观
多彩水晶球近远景预览,CSS 自定义函数驱动的单色主题切换 + 滚动动画效果这是一款 CSS 自定义函数驱动的单色主题切换 + 滚动动画效果,基于 CSS 自定义函数与原生 JavaScript 技术实现。它借助 CSS 的 has () 函数关联单选按钮,可从白、红、...
跳跃小游戏
“别让我腐烂” 南瓜主题平台跳跃收集物品 HTML 网页小游戏源码下载这是一款 “别让我腐烂” 南瓜主题平台跳跃网页小游戏,基于原生 HTML、CSS 与 JavaScript 技术实现,玩家扮演会逐渐腐烂的杰克灯南瓜头,通过方向键 / WASD 控制移动、空格触...
数据卡片
原生CSS+JS实现地滑动式转化率数据仪表盘卡片 UI,轻量、兼容性好、触控体验极佳这是一款可滑动的交互式滑数据仪表盘卡片 UI(图片、文字及走势图),基于原生 HTML5、CSS3 与 JavaScript 技术实现,是移动端优先的数据分析展示组件。,支持手势滑动切换不同时间...
交互列表
支持响应式布局的 GSAP 音乐作品集交互式列表(带图片悬浮 + 闲置动画),这是一款适配音乐场景的交互式表格组件,基于GSAP动画库实现,重构了 HTML 的 ui 表格,加入了列表项的悬停与闲置状态动画效果,关键是支持响应式布局。表格里清晰罗列着音乐人、作品名等信息,...