文章列表逐个上浮动画特效

之前写的,顺手发

e3dce801cef7e209cac6c17ed66b97bb

/* 保留原有的上浮动画关键帧,仅调整延迟间隔 */
@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收藏我们
免费下载资源不会提供任何帮助除非给钱
部分内容来自于网络 如有不妥联系站长删除
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
温馨提示: 本文最后更新于2025-12-12 20:33:57,某些文章具有时效性,若有错误或已失效,请在下方留言或联系学小盏
版权声明

   站内部分内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供网络资源分享服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请 联系我们 一经核实,立即删除。并对发布账号进行永久封禁处理。在为用户提供最好的产品同时,保证优秀的服务质量。


本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。
THE END
喜欢就支持一下吧
抢沙发
头像
提交
头像

昵称

取消
昵称

    请登录后查看评论内容