新年主页网页
WebGPU 金粉粒子鼠标轨迹特效,奢华鼠标拖尾效果这是一款基于 WebGPU 技术的粒子动画效果。页面中的“2026”文字以闪烁的金粉轨迹炫酷入场,带来充满新年氛围的视觉惊喜。与此同时,当鼠标移动时,会拖出细腻闪耀的金色粒子轨迹,动态流畅且富有...
互动光标
WebGL 梦幻星云流体鼠标拖尾互动特效这是一款 WebGL 流体光标跟随效果,基于 WebGL 技术实现,当光标在页面上移动时,通过模拟粒子流动与光线散射,呈现出如星云般梦幻的色彩柔和、带有流动质感的烟雾光影效果,极具视觉冲击力和沉...
光标互动
WebGPU实现的光影彩色流体鼠标拖尾效果+擦除揭示动画这是一款 WebGPU 驱动的流体擦除互动动效,模拟真实液体流动与光影变化。基于 WebGPU + 前端交互逻辑实现 —— 它的流体质感细腻丝滑,响应鼠标滑动时产生自然的涟漪和色彩扩散,还能通过...
极光背景
纯 CSS 极光渐变 hero 模块背景效果,彩色动态背景与标题文字完美融合!这是一款基于CSS实现的彩色渐变光束背景效果,基于纯 CSS 技术(借助 @properties 等 CSS 原生特性)实现,通过动态色彩条纹模拟光线穿透的视觉感,搭配平滑动画让背景仿佛在呼吸般...
线条阴影
CSS 线条纹理质感文字阴影效果这是一款基于CSS实现的线条阴影效果,通过斜向细线构成文字下方的阴影区域,呈现出类似手绘或技术图纸的视觉风格。相比传统模糊阴影,这种“线状阴影”更具设计感和独特性,适合用于标题、LOGO或需要突...
玻璃下拉框
液态玻璃风格自定义下拉菜单组件(CSS+JS)这是一款基于CSS+JS实现的液态玻璃风格自定义下拉菜单组件,整体采用深色半透明设计,搭配柔和光晕和轻微动态反馈,视觉上轻盈通透,切换选项时会以流体般的丝滑动画衔接,代替了普通下拉菜单的生硬跳转...
流动水珠
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 技术实现,页面中央横放着一条渐变绳子,会跟随鼠标光标的移动产生自然的跟随抖动动画,适用于极简风格网页的装饰元素...