简书红心点赞动画
2018-04-03 本文已影响2244人
半块苹果
想看效果的直接拉到最底下去点赞就好了:smile:
原理
一张20帧长图片，点击的时候按帧率进行播放。
like_animation_steps.png
由于后面几颗心是白色的，可能看不太清楚，可以右击图片在新窗口中打开。
源码
html 代码：
<body>
<section class="fave"></section>
</body>
css 代码：
.fave {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #EA6F5A;
background: url(./like_animation_steps.png) no-repeat;
background-position: left;
background-size: auto 100%;
}
.fave.active {
background-color: #EA6F5A;
background-position: right;
/* 主要在这一步 */
transition: background .6s steps(19);
}
transition属性的steps方法把过渡切分成很多步，像动画的帧数一样。
js 代码：
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.fave').on('click', function() {
$(this).toggleClass("active");
})
})
</script>
效果图
为什么不使用 GIF
使用 GIF 文件会很大，而且帧率不好控制。
