00:00/
发布于2017-02-05 / 1197次浏览
直接给预览图:
使用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
暂无评论