jquery心形点赞关注效果的简单实现
html代码
<divclass="stage"> <divclass="heart"></div> </div>
css代码
.heart{
width:100px;
height:100px;
background:url("")no-repeat;
background-position:00;
cursor:pointer;
-webkit-transition:background-position1ssteps(28);
transition:background-position1ssteps(28);
-webkit-transition-duration:0s;
transition-duration:0s;
}
.heart.is-active{
-webkit-transition-duration:1s;
transition-duration:1s;
background-position:-2800px0;
}
body{
background:-webkit-linear-gradient(315deg,#1217210%,#000000100%)fixed;
background:linear-gradient(135deg,#1217210%,#000000100%)fixed;
color:#FFF;
font:30016px/1.5"OpenSans",sans-serif;
}
.stage{
position:fixed;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
js代码
$(function(){
$(".heart").on("click",function(){
$(this).toggleClass("is-active");
});
});
以上就是小编为大家带来的jquery心形点赞关注效果的简单实现全部内容了，希望大家多多支持毛票票~