前言

看到用户发帖感觉一为的文章列表渐入效果好看 于是我仿写了一下 另外新增四种效果可以选择

效果一（加载上浮动画）

教程开始

将下面代码添加到自定义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)}}