前端特效技能展示

13 个独立页面 — CSS · JS · WebGL · 物理 · 着色器

↓ 往下浏览
🎬

View Transitions

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

Browser API
🌿

GSAP 滚动动画

ScrollTrigger 入场 + 固定视差 + Timeline 序列。

GSAP
🧊

Three.js 3D

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

WebGL
💫

Canvas 粒子

纯 Canvas 2D 粒子。鼠标排斥 + 距离连线。

Canvas

CSS 高级特效

@property 旋转边框、毛玻璃、光效追踪、:has()。

CSS
🌌

Shader 着色器

GPU 像素级极光。噪声函数 + FBM 分形。

GLSL
🎲

CSS 3D 透视

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

CSS
✏️

SVG 描边动画

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

SVG
🎵

Web Audio 频谱

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

Web API

Matter.js 物理

2D 刚体物理。重力、碰撞、点击投放小球。

Physics
🎪

微交互合集

CSS 火焰 · 3D Tilt · Clip-path · 打字机 · 涟漪 · 混合模式。

CSS + JS
🎨

更多效果

P5.js 生成艺术 · Scroll Snap · 语音合成 · Observer。

JS APIs