CSS3 效果与代码生成器 | 5 个精选站点

14CSS3

CSS3 效果与代码生成。阴影、圆角、动画、渐变的在线调参器——调好之后直接把代码抄走，不用手写。想快速试一个效果、又懒得反复刷新页面时最有用。

常见问题 · CSS3

CSS 阴影生成器推荐？

站内「CSS参考」两条都有在线调参并生成代码；圆角、阴影、渐变这类效果，用生成器调好再抄代码比手写快得多。

CSS 动画代码在线生成？

Animate.css 提供了成套的现成动画类，引一个文件加个 class 就能用；想自己写关键帧，可以看「邪恶的CSS动画」那类效果集合找思路。

圆角和渐变代码怎么快速生成？

渐变看 Webgradients、uiGradients（见「配色」栏），圆角与阴影用「CSS参考」里的在线工具，调好直接复制代码。

CSS3 · 栏目导览

这个栏目条目很少，但它指向的是前端动效与样式的实现手段，而不是设计素材。放在导航站里可能有点跳，但对「设计稿怎么落地」这件事来说，它是必需的。

CSS 动画库（Animate.css）：把常用动画（淡入、滑动、弹跳）封成现成的 class 名，引入一个 CSS 文件就能用，不用自己写关键帧。
CSS 参考与示例（CSS 参考、邪恶的 CSS 动画）：前者是写法速查，后者是逆向与实验性的 CSS 用法，看的是「CSS 到底能做什么」。

动画要有理由。 动效的作用是解释状态变化（从哪里来、去了哪里），不是让页面显得生动。没有理由的动画，就是延迟。
尊重系统设置。 用户系统里开了「减少动画」时，页面应该跟着降级。一条 prefers-reduced-motion 媒体查询就能做到。
动画只改两个属性。 transform 和 opacity 能走 GPU 合成，不会引起重排重绘。改 width、top、margin 做动画是卡顿的根源。

因为受众不同。在线工具栏面向所有人，这一栏面向要亲手写代码的人。分类是按使用场景切的，不是按资源形态切的。