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

1、新建html文档。

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

5、代码整体结构。