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心形点赞关注效果的简单实现全部内容了，希望大家多多支持毛票票~
热门推荐
4 送米的祝福语简短
10 毕业写给学校简短祝福语
11 喝酒祝福语大全简短新颖
12 高考加油祝福语简短押韵
13 英文关于生日祝福语简短
14 大学除夕祝福语简短英文
15 姓陈简短生日祝福语
16 企业新春祝福语简短大全
17 爸妈对宝宝祝福语简短
18 女儿成年祝福语简短霸气