html怎么显示一个点赞的心形,jquery心形点赞关注效果的简单实现

html代码

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心形点赞关注效果的简单实现全部内容了，希望大家多多支持脚本之家~

html怎么显示一个点赞的心形,jquery心形点赞关注效果的简单实现相关推荐

html显示滚动焦点图代码,商城常用滚动的焦点图效果代码简单实用
这种商城的效果网上很多,但大多是插件,要么JS写的太过于复杂,对于学习的童鞋来说看起来比较费劲,这个看起来比较简单,也比较容易理解,各位童鞋需要的请围观,也欢迎各位评价,贴代码(为方便使用,代码复制即 ...
SAP RETAIL初阶之事务代码MP83 显示一个预测参数文件
SAP RETAIL初阶之事务代码MP83 显示一个预测参数文件注:本文是一篇入门级的简单文章,仅适用于SAP REATAIL初学者,SAP零售大拿们可以跳过了. 笔者使用事务代码MP81创建了一个 ...
python 心形线_python 心形
广告关闭腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! 绘制一条心形曲线最近看到个视频,打算绘制个心型动态的曲线. 1.1 matlab ...
显示一个顶层的提示信息
vb里常作,大概的思路就是显示一个顶层的窗体,提示暂时不要动.c#里更简单了 MsgDlg msg=new MsgDlg(); msg.TopMost= ...
SAP QM QP03显示一个含有Multiple Specs检验特性的检验计划
SAP QM QP03显示一个含有Multiple Specs检验特性的检验计划事务代码QP03是用来显示检验计划主数据的. 含有MultipleSpecs的检验计划,同样也可以在这个事务代码里显示 ...
SAP RETAIL 使用事务代码WB03去显示一个后台配置的工厂
SAP RETAIL 使用事务代码WB03去显示一个后台配置的工厂 1, 如下的工厂,都是在SPRO后台配置的用于制造业的工厂代码. 比如工厂代码0001. 2, 试图使用WB03去显示这个工厂数据, ...
SAP QM 事务代码QPR3显示一个Physical Sample Record
SAP QM 事务代码QPR3显示一个Physical Sample Record 执行事务代码QPR3,输入一个physical sample record号码,比如103733378,回车,进入如 ...
linux 如何显示一个文件的某几行(中间几行)
linux 如何显示一个文件的某几行(中间几行) [一]从第3000行开始,显示1000行.即显示3000~3999行 cat filename | tail -n +3000 | head -n 1 ...
Teamviewer连接服务器显示不能够全屏或向日葵连接服务器不能够全屏或 Teamviewer只显示一个640x480的分辨率选项
欢迎大家关注笔者,你的关注是我持续更博的最大动力原创文章,转载告知,盗版必究 Teamviewer连接服务器显示不能够全屏或向日葵连接服务器不能够全屏或 Teamviewer只显示一个640x ...

html怎么显示一个点赞的心形,jquery心形点赞关注效果的简单实现

html怎么显示一个点赞的心形,jquery心形点赞关注效果的简单实现相关推荐

最新文章

热门文章