首页 / 脚本样式 / JavaScript / jquery心形点赞关注效果的简单实现

<div class="stage"><div class="heart"></div> </div>

.heart {width: 100px;height: 100px;background: url（""） no-repeat;background-position: 0 0;cursor: pointer;-webkit-transition: background-position 1s steps（28）;transition: background-position 1s steps（28）;-webkit-transition-duration: 0s;transition-duration: 0s; } .heart.is-active {-webkit-transition-duration: 1s;transition-duration: 1s;background-position: -2800px 0; }body {background: -webkit-linear-gradient（315deg, #121721 0%, #000000 100%） fixed;background: linear-gradient（135deg, #121721 0%, #000000 100%） fixed;color: #FFF;font: 300 16px/1.5 "Open Sans", sans-serif; }.stage {position: fixed;top: 50%;left: 50%;-webkit-transform: translate（-50%, -50%）;transform: translate（-50%, -50%）; } 

$（function（） {$（".heart"）.on（"click", function（） { $（this）.toggleClass（"is-active"）;}）; }）;