Twitter红心点赞CSS3动画按钮特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Twitter红心点赞CSS3动画按钮特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter红心点赞CSS3动画按钮特效</title>

<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<article class="htmleaf-container">
	<div id="container">
		<h3>点击下面的红心查看效果！</h3>

		<div class="feed" id="feed1">
		<p>W3C </p>
		<div class="heart " id="like1" rel="like"></div> <div class="likeCount" id="likeCount1">14</div>
		</div>

		<div class="feed" id="feed2">
		<p>百度一下</p>
		<div class="heart" id="like2" rel="like"></div> <div class="likeCount" id="likeCount2">10</div>
		</div>

	</div>

</article>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>

<script>
$(document).ready(function()
{

$('body').on("click",'.heart',function()
{
	
	var A=$(this).attr("id");
	var B=A.split("like");
	var messageID=B[1];
	var C=parseInt($("#likeCount"+messageID).html());
	$(this).css("background-position","")
	var D=$(this).attr("rel");
   
	if(D === 'like') 
	{      
	$("#likeCount"+messageID).html(C+1);
	$(this).addClass("heartAnimation").attr("rel","unlike");
	
	}
	else
	{
	$("#likeCount"+messageID).html(C-1);
	$(this).removeClass("heartAnimation").attr("rel","like");
	$(this).css("background-position","left");
	}
});
});
</script>
</body>
</html>

CSS代码(style.css):

body{color:#333333;}
#container{margin:0 auto;width:900px;font-family:arial;}
#container h3{font-family:"Microsoft YaHei";}
.heart{background:url(../images/web_heart_animation.png);background-position:left;background-repeat:no-repeat;height:100px;width:100px;cursor:pointer;position:absolute;left:-14px;background-size:2900%;}
.heart:hover,.heart:focus{background-position:right;}
@-webkit-keyframes heartBlast{0%{background-position:left;}
100%{background-position:right;}
}
@keyframes heartBlast{0%{background-position:left;}
100%{background-position:right;}
}
.heartAnimation{display:inline-block;-webkit-animation-name:heartBlast;animation-name:heartBlast;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-timing-function:steps(28);animation-timing-function:steps(28);background-position:right;}
.feed p{font-family:"Microsoft YaHei",'Georgia',Times,Times New Roman,serif;font-size:25px;}
.feed{clear:both;margin-bottom::20px;height:150px;position:relative;}
a{color:#7ac9ed;}
p{margin:0px;padding:0px;}
.likeCount{font-family:'Georgia',Times,Times New Roman,serif;margin-top:32px;margin-left:68px;font-size:25px;color:#999999}

附件:下载该文件资源,减少时间成本(增值服务)