# 使用 Tailwind CSS 制作带动画的加载骨架屏 > 使用 Tailwind CSS 和微光（shimmer）效果构建带动画的加载骨架屏，让你在真实内容加载期间展示占位 UI。作者 Shodipo Ayomide，发布于 2022年7月18日。网页版本：https://blog.shodipoayomide.com/zh/animated-loading-skeletons-with-tailwind

# 骨架屏 - 利用 Tailwind 丰富的工具类，创建一个与即将加载的内容大致相似的骨架。

```html

```

# 渐变遮罩 - 使用 Tailwind 的渐变色标（gradient color stops）创建一个从透明渐变到白色、再渐变回透明的渐变效果。

```html

```

# 动画 - 在 `tailwind.config.js` 的 extend keyframes 对象中定义一个 CSS 关键帧动画，让元素向右平移 100%。 - 使用 Tailwind 的任意值（arbitrary values）把这个关键帧动画应用到遮罩元素上。

```json { "keyframes": { "shimmer": { "100%": { "transform": "translateX(100%)", }, }, } }, ``` ```html

```

# 组合骨架屏与遮罩动画 - 使用 Tailwind 的 `before:` 修饰符，把遮罩添加到骨架屏外层容器的伪元素上。

```html

[...]

```

# 收尾润色 - 当遮罩位于骨架屏之外时将其隐藏。 - 给骨架屏加上阴影。 - 在遮罩顶部添加一条细微的边框，模拟光线反射的效果。 - 你可以用 `isolate` 修复 Safari 在圆角处动画溢出的问题。

```html

[...]

```