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

之前写的,顺手发

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收藏我们
免费下载资源不会提供任何帮助除非给钱
部分内容来自于网络 如有不妥联系站长删除
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
友情赞助

如果你喜欢我的内容,可以赞助我哦!你的一点点心意,是我不断前进的动力!

© 版权声明
THE END
喜欢就支持一下吧
点赞50 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片快捷回复

    暂无评论内容