发光卡片
月相科普卡片 - CSS玻璃态分割式发光图文卡片展示效果这是一款基于CSS实现的玻璃态卡片效果，通过巧妙的视觉分割将一张完整的月球背景图分解成四个不同主题的展示区域。核心创意在于"图片分割术"：整个界面使用同一张完整的月球高清图作为背景，四张卡片通过...
光标互动
WebGPU实现的光影彩色流体鼠标拖尾效果+擦除揭示动画这是一款 WebGPU 驱动的流体擦除互动动效，模拟真实液体流动与光影变化。基于 WebGPU + 前端交互逻辑实现 —— 它的流体质感细腻丝滑，响应鼠标滑动时产生自然的涟漪和色彩扩散，还能通过...
汉堡菜单
CSS+JS炫光螺旋汉堡菜单按钮 - 让导航切换充满仪式感这是一款带粒子光效的创意菜单按钮，基于CSS3和JavaScript实现，点击时三条横线会螺旋变形为关闭图标，并伴随粒子光晕扩散效果，为网站导航增添视觉惊喜。这款动效能在用户首次点击时就建立品...
文字扩散
HTML动态文字墙生成动画，一段文字被分割为多个句子扩散开来动画效果这是一款基于 JavaScript + CSS 技术实现的自动生成动态文字墙效果，实现了自动将一段话分隔成句子，然后分散在四周的动画效果。文字可直接替换。通过循环动画控制密集文本的视觉变化，适...
脉冲扩散效果
SVG+CSS圆形逐渐扩散形成的脉冲动画效果这是一款脉冲动画效果，基于SVG与CSS技术实现，通过SVG图形和CSS动画的结合，模拟了圆点周边光波有节奏地膨胀扩散效果，如同心跳般的脉动。这种动画常用于按钮、图标或其他界面元素上，以吸引用户...
创意字符
CSS多层光环嵌套3D立体复古文字效果，点按文字实现多层光环扩散效果当前代码段基于CSS创建了一个复古风格的多层光环嵌套的3D文字效果，支持点按键盘任意键更换文字，当鼠标悬停在字母上时，字母会跟随光标移动，点击并按住字母时，文字会激活一个多彩的光环扩散效果。这种...
迸裂
CSS钻石旋转飞向四方动画效果基于CSS实现的钻石旋转四方扩散效果，HTML中预先定义三个figure区域对应着三层钻石结构，最内层定义多个div代表多个钻石。然后通过CSS的display: grid;以及grid-te...
圆形动画
GSAP 实现的圆形位移、穿透、旋转、扩散等多种动画效果如标题所示，使用GSAP实现了多种圆形动画效果，包括穿透效果、扩散效果、交叉效果、移动效果、平移效果、重叠效果等多种交互性极强的圆形相关动画效果，并且附带了定时暂停以及鼠标点击激活的效果，可用作...