前言
大家好 我是墨星博客 看到用户发帖感觉一为的文章列表渐入效果好看 于是我仿写了一下 另外新增四种效果可以选择
效果一（加载上浮动画）
教程开始
将下面代码添加到自定义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)}}
