1.创建html
2. css
.heart {
background: url(http://demo.htmleaf.com/1511/201511131551/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;