使用CSS3创建红心点赞动态效果
本文介绍如何利用CSS3实现一个红心点赞的动态效果。通过逐帧动画和`step()`函数来控制素材图片在不同帧的位置变化，原本尝试通过改变背景位置实现平滑过渡，但最终采用`step()`确保了动画效果的不连续性，达到预期的点赞动画视觉体验。
实现效果：
素材：
思路：
逐帧动画，设置素材图片在每一帧的位置移动。
刚开始的思路是把素材图片作为动画区域的background-image，然后再通过animation来改变background-position。但是实际操作之后发现这样做实际上是平滑过渡，没有达到我想要的效果，后来了解到了steps这个函数。
steps实际上是animation-timing-function的参数，以为不连续执行动画。
steps有两个参数，第一个参数是要分布执行的步数，在本例中，我的素材图片一共有29帧，也就是说一共需要分成28次执行，所以给steps传一个28就好了。第二个参数有两个值，分别是start和end，start第一帧是第一步动画结束，end第一帧是第一步动画开始。
完整代码：
.heart {
background: 
最低0.47元/天 解锁文章
扫一扫
905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
