Open Resources · 免费商用 · 可自由调用

网页灵感工具箱

从网上精选的 3 个公开资源:图片素材、粒子特效、页面切换效果。每一项都有真实演示,页面底部可一键复制提示词与素材链接,随时调用。

向下探索 ↓

图片素材 · Unsplash

官网 unsplash.com ↗
✓ Unsplash License 免费商用 无需署名 直链已验证可用

全球最受欢迎的免费高清图库之一。任何图片都可以直接外链,格式:https://images.unsplash.com/图片ID?w=1200&q=80。下面 6 张为已验证可用的直链示例,悬停可复制单张链接。

提示:把链接里的 w=1200 改小(如 w=400)即可获得缩略图,fit=crop 可按尺寸裁剪。

粒子特效 · particles.js

GitHub ↗
✓ MIT 开源 一行 CDN 引入 鼠标可交互

经典粒子连线特效库(本页首屏背景就是它)。移动鼠标试试 —— 粒子会被牵引连线。支持气泡、星空、推挤等多种模式,还有在线配置生成器。

← 在此区域内移动鼠标 / 点击试试
最小可用代码

      

切换效果 · GSAP 幕布转场

官网 gsap.com ↗
✓ 全插件免费 品牌级网页常用 转场参考 Codrops

GSAP 是业界最流行的网页动画库,现在全部功能免费。下面演示它最经典的「幕布擦除」页面切换:色块从底部盖住屏幕、换页、再从顶部揭开。点击右上角导航试试。

首页

这是演示页面 A。幕布转场适合单页应用(SPA)在路由切换时使用,让页面之间的关系更连贯。

作品

这是演示页面 B。真实项目中常配合 Barba.js 或框架路由钩子,在内容替换的瞬间完成遮盖。

关于

这是演示页面 C。转场时长建议 0.6 – 0.9 秒:太快显得生硬,太慢让访问者等待。

实现思路:全屏幕布 scaleY: 0 → 1(origin: bottom)盖住屏幕 → 切换内容 → transform-origin: top + scaleY: 1 → 0 揭开,用 gsap.timeline() 串联。更多变体见 Codrops 页面转场合集。

复制提示词与素材

下面这段提示词包含本页全部 3 个资源的用法与链接。复制后发给任意 AI(如 Z.ai、Claude、ChatGPT),即可一键复刻这些效果;素材链接也可直接用于你自己的项目。