恰当的动效可以提升用户体验。
动效原则
- 有目的 - 每个动效都应该有明确的目的
- 自然 - 遵循物理世界的运动规律
- 简洁 - 避免过度动画
- 快速 - 动效不应让用户等待
CSS动画
.fade-in {
animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
评论 (0)
暂无评论，来发表第一条评论吧！
发表评论