2024-05-19 13:08:10 +08:00
|
|
|
|
@keyframes fade-up {
|
|
|
|
|
|
0% {
|
|
|
|
|
|
transform: translateY(60px);
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2024-06-16 22:57:26 +08:00
|
|
|
|
// 卡片过渡动画
|
|
|
|
|
|
// 根据遍历的卡片数量应用动画，卡片数量支持20个
|
2024-05-19 13:08:10 +08:00
|
|
|
|
@for $i from 0 through 20 {
|
|
|
|
|
|
.animated-fade-up-#{$i} {
|
|
|
|
|
|
opacity: 0; // 初始透明度
|
|
|
|
|
|
animation-name: fade-up; // 应用动画
|
|
|
|
|
|
animation-duration: 0.5s; // 动画持续时间
|
|
|
|
|
|
animation-fill-mode: forwards; // 保持结束后的动画状态
|
|
|
|
|
|
animation-delay: calc($i/10) + s; // 设置延迟-每次延迟0.1s
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
