子比主题美化 – 文章列表多种动画效果美化

效果一（加载上浮动画）

将下面代码添加到自定义css代码中即可

.posts-item{animation:floatUp 0.8s ease forwards}@keyframes floatUp{0%{opacity:0;transform:translateY(30px)}100%{opacity:1;transform:translateY(0)}}

效果二（上浮弹性动画）

将下面代码添加到自定义css代码中即可

.posts-item{animation:floatUpBounce 0.9s ease forwards}@keyframes floatUpBounce{0%{opacity:0;transform:translateY(30px)}70%{opacity:1;transform:translateY(-10px)}100%{opacity:1;transform:translateY(0)}}

效果三（缩放旋转动画）

将下面代码添加到自定义css代码中即可

.posts-item{animation:floatUpScale 0.7s ease forwards}@keyframes floatUpScale{0%{opacity:0;transform:translateY(30px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}

效果四（旋转上浮动画）

将下面代码添加到自定义css代码中即可

.posts-item{animation:floatUpRotate 0.8s ease forwards}@keyframes floatUpRotate{0%{opacity:0;transform:translateY(30px) rotate(-5deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}

👋 感谢您的观看！