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 新人结婚祝福语简短高端