前端动画、交互和组件灵感都去哪找？这 12 个网站值得长期逛

七夏 · 2 小时前

很多前端做久了都会有同一个问题：
会写代码，也知道怎么实现，但一到“页面该怎么更好看一点”“这个交互还能不能更顺一点”，就容易卡住。

这时候真正缺的，往往不是教程，而是灵感入口。

下面这 12 个网站，适合拿来找动画、交互、组件、页面细节和实现思路，值得长期收藏。

1. CodePen

简介：前端最经典的灵感站之一，适合看 CSS 动画、页面效果、交互 Demo 和各种可直接拆解的小实验。
地址：https://codepen.io

2. Dribbble

简介：适合看页面视觉、界面风格、动效概念和组件展示，偏设计灵感，但对前端做界面也很有帮助。
地址：https://dribbble.com

3. Behance

简介：更适合看完整项目和整套视觉方案，不只是单个组件，而是整页、整站和完整产品表达。
地址：https://www.behance.net

4. Awwwards

简介：适合看高质量官网、品牌站、创意页面和沉浸式交互，想找“网页还能这样做”的感觉，这里很合适。
地址：https://www.awwwards.com

5. Godly

简介：一个很适合前端逛的灵感站，收录很多优秀网站案例，适合找布局、排版和整体页面方向。
地址：https://godly.website

6. Mobbin

简介：偏产品和移动端，适合看真实 App 的页面流、交互细节、表单、弹窗、导航和 onboarding 设计。
地址：https://mobbin.com

7. UI Movement

简介：专门看 UI 动效和交互细节很方便，适合找按钮反馈、切换动画、加载态和微交互灵感。
地址：https://uimovement.com

8. Collect UI

简介：适合按组件类型找案例，比如登录页、卡片、搜索框、导航栏、Dashboard 模块，查找效率很高。
地址：https://collectui.com

9. Land-book

简介：适合看 landing page 和营销页，尤其适合找首屏结构、文案排布、按钮层级和商业化页面表达。
地址：https://land-book.com

10. One Page Love

简介：专注单页网站和落地页，适合看简洁型产品官网、作品集页面和轻量商业站。
地址：https://onepagelove.com

11. Uiverse

简介：适合直接找按钮、开关、输入框、加载动画等现成前端小组件，很多效果前端能直接参考甚至快速改造。
地址：https://uiverse.io

12. Figma Community

简介：适合找组件库、设计稿、页面模板和设计系统素材，很多前端也会把它当作 UI 参考仓库来用。
地址：www.figma.com/community

推荐收藏方式

如果你不想一次看太多，可以先按用途分：

很多时候，前端做不好看，不是不会写，而是平时看的好东西太少。
把这些入口养成习惯，很多页面和交互灵感会来得自然很多。

回复