骨架屏
- 利用 Tailwind 丰富的工具类，创建一个与即将加载的内容大致相似的骨架。
<div class="space-y-5 rounded-2xl bg-white/5 p-4">
<div class="h-24 rounded-lg bg-rose-100/10"></div>
<div class="space-y-3">
<div class="h-3 w-3/5 rounded-lg bg-rose-100/10"></div>
<div class="h-3 w-4/5 rounded-lg bg-rose-100/20"></div>
<div class="h-3 w-2/5 rounded-lg bg-rose-100/20"></div>
</div>
</div>渐变遮罩
- 使用 Tailwind 的渐变色标（gradient color stops）创建一个从透明渐变到白色、再渐变回透明的渐变效果。
<div
class="
[...]
bg-gradient-to-r from-transparent via-rose-100/10 to-transparent"
></div>动画
- 在
tailwind.config.js的 extend keyframes 对象中定义一个 CSS 关键帧动画，让元素向右平移 100%。 - 使用 Tailwind 的任意值（arbitrary values）把这个关键帧动画应用到遮罩元素上。
{
"keyframes": {
"shimmer": {
"100%": {
"transform": "translateX(100%)",
},
},
}
},<div class="[...] -translate-x-full animate-[shimmer_2s_infinite]"></div>组合骨架屏与遮罩动画
- 使用 Tailwind 的
before:修饰符，把遮罩添加到骨架屏外层容器的伪元素上。
<div
class="
[...]
relative
before:absolute before:inset-0
before:-translate-x-full
before:animate-[shimmer_2s_infinite]
before:bg-gradient-to-r
before:from-transparent before:via-rose-100/10 before:to-transparent"
>
[...]
</div>收尾润色
- 当遮罩位于骨架屏之外时将其隐藏。
- 给骨架屏加上阴影。
- 在遮罩顶部添加一条细微的边框，模拟光线反射的效果。
- 你可以用
isolate修复 Safari 在圆角处动画溢出的问题。
<div
class="
[...]
isolate
overflow-hidden
shadow-xl shadow-black/5
before:border-t before:border-rose-100/10"
>
[...]
</div>•••
分享本文：
获取最新动态
将最新文章直接发送到你的收件箱。