个人头像

柠檬酸

1月前来过

控制台
欢迎来到我的博客!
默认封面

00:00/

播放列表

纯css3实现红心跳动效果

发布于2017-02-05 / 767次浏览

效果:

直接给预览图:

分析:

使用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

喜欢 3
TAGS:  暂无标签
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。 转载请注明出处链接 : 纯css3实现红心跳动效果

暂无评论