之前写的,顺手发

/* 保留原有的上浮动画关键帧,仅调整延迟间隔 */
@keyframes floatUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.posts-item {
opacity: 0; /* 初始隐藏,避免闪烁 */
animation: floatUp 0.8s ease forwards; /* 动画时长保持0.8s不变 */
}
/* 延迟间隔改为0.2秒,逐个递增 */
.posts-item:nth-child(1) { animation-delay: 0s; }
.posts-item:nth-child(2) { animation-delay: 0.2s; }
.posts-item:nth-child(3) { animation-delay: 0.4s; }
.posts-item:nth-child(4) { animation-delay: 0.6s; }
.posts-item:nth-child(5) { animation-delay: 0.8s; }
.posts-item:nth-child(6) { animation-delay: 1.0s; }
.posts-item:nth-child(7) { animation-delay: 1.2s; }
.posts-item:nth-child(8) { animation-delay: 1.4s; }
.posts-item:nth-child(9) { animation-delay: 1.6s; }
.posts-item:nth-child(10) { animation-delay: 1.8s; }
.posts-item:nth-child(11) { animation-delay: 2.0s; }
.posts-item:nth-child(12) { animation-delay: 2.2s; }
.posts-item:nth-child(13) { animation-delay: 2.4s; }
.posts-item:nth-child(14) { animation-delay: 2.6s; }
.posts-item:nth-child(15) { animation-delay: 2.8s; }
.posts-item:nth-child(16) { animation-delay: 3.0s; }
.posts-item:nth-child(17) { animation-delay: 3.2s; }
.posts-item:nth-child(18) { animation-delay: 3.4s; }
.posts-item:nth-child(19) { animation-delay: 3.6s; }
.posts-item:nth-child(20) { animation-delay: 3.8s; }
.posts-item:nth-child(21) { animation-delay: 4.0s; }
/* 若后续有更多卡片,继续按「前一个延迟+0.2s」的规律添加即可 *
版权所有 © 学小盏
原文地址:文章列表逐个上浮动画特效
Ctrl+D收藏我们
免费下载资源不会提供任何帮助除非给钱
部分内容来自于网络 如有不妥联系站长删除
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
© 版权声明
分享是一种美德,转载请保留原链接
THE END









![子比AI助手插件-最新版V3.0.0已更新[2025-12-12][更新日志]-学小盏](https://oss.tenyuankeji.cn/xuexz/uploads/2025/11/%E7%94%9F%E6%88%90%E6%96%87%E7%AB%A0%E5%B0%81%E9%9D%A2.png)















暂无评论内容