前端特效技能

🎬

View Transitions

浏览器原生页面切换动画。点击卡片体验"飞入"过渡效果。

Browser API

🌿

GSAP 滚动动画

ScrollTrigger 驱动的入场动画、视差效果、序列编排。

JavaScript

🧊

Three.js 3D

3D 环面结 + 粒子环。拖拽旋转、滚轮缩放。

WebGL

💫

Canvas 粒子

纯 Canvas 2D 粒子系统。鼠标推开粒子，距离连线。

JavaScript

✨

CSS 高级特效

@property 动画、发光边框、渐变文字、毛玻璃卡片。

Pure CSS

🌌

Shader 着色器

GPU 像素级渲染。极光流动效果，噪声函数 + FBM。

WebGL GLSL

🎲

CSS 3D 透视

3D 旋转立方体 + 悬停翻牌。纯 CSS perspective。

Pure CSS

✏️

SVG 描边动画

stroke-dasharray 让线条像写字一样"画出来"。

SVG + CSS

🎵

Web Audio 可视化

AnalyserNode 实时频谱。合成音频驱动柱状图跳动。

Web Audio API

⚽

Matter.js 物理引擎

2D 物理世界。重力、碰撞、弹跳。点击投放小球。

JavaScript

🎪

更多炫酷效果

CSS 火焰 · 3D Tilt · Clip-path · 打字机 · 涟漪 · 混合模式 · 弹性动效

CSS + JS