意见箱
恒创运营部门将仔细参阅您的意见和建议,必要时将通过预留邮箱与您保持联络。感谢您的支持!
意见/建议
提交建议

巧用 transition 实现短视频 APP 点赞动画

来源:恒创科技 编辑:恒创科技编辑部
2024-01-18 14:11:59

在各种短视频界面上,我们经常会看到类似这样的点赞动画:

非常的有意思,有意思的交互会让用户更愿意进行互动。


巧用 transition 实现短视频 APP 点赞动画

那么,这么有趣的点赞动画,有没有可能使用纯 CSS 实现呢?那当然是必须的,本文,就将巧妙的借助 transition,仅仅使用 CSS 完成这么一个点赞动画。

实现不同表情的不断上升

如果使用纯 CSS 实现这一整套动画的话。我们首先需要实现一段无限循环的,大量不同的表情不断向上漂浮的动画

像是这样:

这个整体还是比较容易实现的,核心原理就是同一个动画,设置不同的 transition-durationtransition-dalay,和一定范围内的旋转角度。

我们首先要实现多个表情,一个 DOM 标签放入一个随机的表情。

我们可以手动一个一个的添加:

<ul class="g-wrap">
    <li>                                    
上一篇: 如何使用CSS伪类选择器 下一篇: 手机怎么远程登录云服务器?