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心形点赞关注效果的简单实现全部内容了，希望大家多多支持毛票票~
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短