标签：opacity 动画 random APP transition 点击 点赞 50px

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

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

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

实现不同表情的不断上升

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

像是这样：

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

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

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

<ul class="g-wrap">
    <li>
 
 
标签：opacity,动画,random,APP,transition,点击,点赞,50px	

来源： https://www.cnblogs.com/coco1s/p/16638418.html 


本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。