CodePen 上的 3D 特效，怎么搬到自己网站上线

CodePen 是 3D 特效的灵感金矿，但把上面的效果搬到自己网站，有三个坑。下面一步一步讲，讲完你会发现：其实现成的免费模板能省掉一大半工作。

第一步：看许可证，别搬了被告

CodePen 上的代码默认没有明确许可证，商用有风险。找作者标注了 MIT 的，或者联系作者要授权。嫌麻烦的话，FX Lab 的 150 套模板全部 MIT，随便商用，这是它们存在的意义。

第二步：从 Pen 抽成单文件

CodePen 的代码是分 HTML/CSS/JS 三栏的，搬出来要拼成一个文件。注意三件事：① 外部库（three.js、GSAP）要下载到本地，CDN 在国内可能被墙；② 图片资源换成本地路径；③ 把 CodePen 的自动补全前缀去掉（比如它自动加的 viewport meta 可能跟你网站的冲突）。

# 检查模板有没有外部依赖（应该零输出才对）
grep -o 'https://[^"'"' ]*' index.html | grep -v fonts.googleapis | head

第三步：移动端适配，这是 90% 人翻车的地方

CodePen 上的特效大多只考虑桌面端。搬到自己网站，必须做三件事：

• ·触摸事件：mouse 换成 pointer，hover 效果在手机上要换成 tap
• ·性能降级：粒子数、像素比（devicePixelRatio）按设备降档，低端机强制 1x
• ·viewport：特效画布用 100vw/100vh，别写死像素

总结：CodePen 适合找灵感，不适合直接抄上线。真要上线，要么按上面三步自己处理，要么用现成模板。时间比面子重要。