html5+CSS3红心点赞动画按钮效果

新建html文档。

书写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 }

书写并引用js代码。 

代码整体结构。

查看效果。