当前位置: 主页 > 网站制作 > JavaScript教程 >

jquery心形点赞关注效果的简单实现

时间:2016-11-25 23:15来源:未知 作者:admin 点击:
html代码 div class="stage" div class="heart"/div /div css代码 .heart { width: 100px; height: 100px; background: url("") no-repeat; background-position: 0 0; cursor: pointer; -webkit-transition: background-position 1s steps(28); transiti

html代码

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

css代码

.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%); } 

js代码

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

以上就是小编为大家带来的jquery心形点赞关注效果的简单实现全部内容了,希望大家多多支持脚本之家~




(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------