柠檬酸
12月前来过
00:00/
发布于2017-02-05 / 923次浏览
直接给预览图：
使用css3的animation，@keyframes
这个动画包括两部分，一个是twitter的“点赞”功能。另一个则是后面的跳动效果（不依赖jQuery）
第一部分请参考文章：点这里，我已经在博客记录并实现啦，这里就不多说了。今天的重点是第二部分。
.heart1 {
animation: HEARTBEAT 2.5s infinite 1s;
}
@keyframes HEARTBEAT {
0% {
transform: scale(1);
}
5% {
transform: scale(1.3);
}
10% {
transform: scale(1.1);
}
15% {
transform: scale(1.5);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
最后在body点击事件中加入引入代码：
setTimeout("show()",400);
setTimeout("remove()",400);
function show(){
$(".heart").addClass("heart1");
}
function remove(){
$(".heart").removeClass("heart1");
}
参考资料：
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 “ease”。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 “normal”。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 “running”。 | 3 |
| animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
最后修改于：2017年2月8日 下午10:43
暂无评论