动画
推荐使用
tailwindcss,unocss等 CSS 工具，更有利于个性化定制 UI 和按需构建最小化 CSS 文件。
默认样式文件中的 CSS 动画类。
CSS动画类
CSSanimation-iteration-count: infinite;animation-delay: 5s;animation-duration: 3s;
| 类名 | 描述 | 示例 | 循环 |
|---|---|---|---|
animate-none |
禁用动画 | - | |
animate-spin |
旋转动画 | 是 | |
animate-ping |
脉冲动画（强） | 是 | |
animate-pulse |
脉冲动画（弱） | 是 | |
animate-bounce |
弹跳动画 | 是 | |
animate-fade-in |
淡入动画 | - | |
animate-fade-out |
淡出动画 | - | |
animate-shake |
摇晃动画 | - | |
animate-slide-to-top |
上滑动画 | - | |
animate-slide-to-bottom |
下滑动画 | - | |
animate-slide-to-left |
左滑动画 | - | |
animate-slide-to-right |
右滑动画 | - |
动画属性
data-reveal
为元素设置 data-reveal 属性，实现容器渐入显示的动画效果。详情参考首页中卡片的渐入显示效果。
根据属性值，实现不同的显示延迟。支持：
data-revealdata-reveal="2"data-reveal="3"data-reveal="4"
HTML<!-- 第一个渐入显示 --><div class="card" data-reveal>...</div><!-- 第二个渐入显示 --><div class="card" data-reveal="2">...</div><!-- 第三个渐入显示 --><div class="card" data-reveal="3">...</div><!-- 第四个渐入显示 --><div class="card" data-reveal="4">...</div>