html实现点赞动画效果代码,Twitter“点赞”红心按钮CSS3动画特效
这是一款效果非常炫酷的仿Twitter“点赞”红心按钮CSS3动画特效。该“点赞”特效使用一颗心形按钮,在用户点击心形按钮的时候,心形按钮由灰色变为红色,同时会在心形按钮的四周产生类似烟花爆炸的效果。
使用方法
HTML结构
该“点赞”红心按钮的HTML结构是将心形按钮放在一个超链接的后面或下面,它的HTML结果如下:
jQuery之家 http://www.htmleaf.com/
CSS样式
整个“点赞”烟花爆炸效果实际上是使用背景图片的连续播放来完成的,它使用一张很长的雪碧(Sprite)图片,然后在点击红心按钮是逐帧进行播放。下面是开始时显示第一帧的CSS样式:
.heart {
background: url(images/web_heart_animation.png);
background-position: left;
background-repeat: no-repeat;
height: 50px;
width: 50px;
cursor: pointer;
position: absolute;
left:-14px;
background-size:1450px; //实际背景图片尺寸2900px
}
.heart:hover{
background-position: right; //显示最后一个红心帧
}
.likeCount{
margin-top: 13px;
margin-left: 28px;
font-size: 16px;
color: #999999
}
下面的代码是逐帧播放红心背景图片,它使用CSS3 keyframe帧动画来完成。
@-webkit-keyframes heartBlast {
0% {background-position: left;}
100% {background-position: right;}
}
@keyframes heartBlast {
0% {background-position: left;}
100% {background-position: right;}
}
.heartAnimation {
-webkit-animation-name: heartBlast; //webkit内核浏览器
animation-name: heartBlast;
-webkit-animation-duration: .8s;
animation-duration: .8s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: steps(28); //共28个背景图片帧
animation-timing-function: steps(28);
background-position: right;
}
JavaScript
在这个“点赞”红心动画特效中使用jQuery代码来使红心按钮在点击时与相应的总点赞数量进行联动。你可以通过ajax来进行数据库操作。当用户点赞时,总数量加1,取消点赞时,总数量减1。
$(document).ready(function(){
$('body').on("click",'.heart',function(){
var A=$(this).attr("id");
var B=A.split("like"); //splitting like1 to 1
var messageID=B[1];
$(this).css("background-position","")
var D=$(this).attr("rel");
$.ajax({
type: "POST",
url: "message_like_ajax.php",
data: dataString,
cache: false,
success: function(data){
$("#likeCount"+messageID).html(data);
if(D === 'like') {
$(this).addClass("heartAnimation").attr("rel","unlike"); //applying animation class
}
else{
$(this).removeClass("heartAnimation").attr("rel","like");
$(this).css("background-position","left");
}
}); //ajax end
});//heart click end
});
html实现点赞动画效果代码,Twitter“点赞”红心按钮CSS3动画特效相关推荐
- 用html和css怎么做出点击关注红心,Twitter“点赞”红心按钮CSS3动画特效
这是一款效果非常炫酷的仿Twitter"点赞"红心按钮CSS3动画特效.该"点赞"特效使用一颗心形按钮,在用户点击心形按钮的时候,心形按钮由灰色变为红色,同时会 ...
- html制作图片动画效果代码,HTML5 Canvas:制作动画特效
编辑推荐: 本文来自于jquery之家 ,html5制作canvas动画的基本步骤,控制canvas动画和实例代码. 要在 HTML5 canvas 中绘制图像动画效果,你需要绘制出每一帧的图像,然后 ...
- jQuery酷炫的文字动画效果代码
jquery css3文字动画特效点击切换文字动态效果 jquery文字动画特效制作淡出淡进文字轮播动画效果代码 jquery文字提示点击按钮触发文字变大消失动画效果 jquery点击按钮淡出淡进动画 ...
- css3 动画图片滚动条,CSS3实现滚动条动画效果代码分享
一团网资讯 一团资讯 > css3 > CSS3实现滚动条动画效果代码分享 CSS3实现滚动条动画效果代码分享 2018-05-01 08:57:16 发布者:来源网络 先给大家一 ...
- css手指点击样式,CSS3-通过 Animation实现手指点击动画效果代码
CSS3-通过 Animation实现手指点击动画效果代码 html代码: css代码.wrapper { /* position: absolute; top: 50%; left: 50%; */ ...
- android淡入淡出动画循环,Android应用开发之淡入淡出、缩放、旋转、平移、组合动画效果代码实现...
本文将带你了解Android应用开发Android动画开发之淡入淡出.缩放.旋转.平移.组合动画效果代码实现,希望本文对大家学Android有所帮助. 1.activity_main.xml文件 an ...
- html怎么把字做成动画效果,8个华丽的HTML5文字动画特效赏析
文字是网页的灵魂,很早以前有人发明了很多漂亮的计算机字体,这让网页变得样式各异.HTML5和CSS3的出现,我们可以让文字变得更加富有个性,在一些需要的场合,我们甚至可以利用HTML5制作文字动画.本 ...
- android点赞的动画效果,android实现点赞动画
想让APP给人一个好的映像,无非使自己实现的功能更加炫丽!! 接下来给大家介绍下点赞的一个动画效果: 接下来看看是如何实现的: 简单布局如下: xmlns:tools="http://sch ...
- php点赞效果代码,php点赞效果的制作代码+解析(jQuery+Ajax+PHP实现“赞”)
数据库设计 先准备两张表,pic表保存的是图片信息,包括图片对应的名称.路径以及图片"赞"总数,pic_ip则记录用户点击赞后的IP数据. CREATE TABLE IF NOT ...
最新文章
- linux命令之查看动态库中字符串-strings
- dede config.chche.inc.php,dede/config.php · 辉辉菜/三强源码 - Gitee.com
- python 去重_上来就情感分析?我还是先用python去去重吧!
- 微软Asp.Net架构与项目团队管理建设模型分析
- Solaris Boot PROM 指令
- 网易云IM(即时通讯) 互动直播集成
- hbuilder + MUI 编写跨平台移动端app目前发现的优缺点
- ngnix 端口映射
- 苹果mac休眠快捷键_有人说 Mac 系统不适合搞科研,我笑了:还不是因为你不会用!...
- java练手小项目雷霆战机
- 老闪创业那些事儿(9)——雏鹰计划(上)
- 中兴华为继续应诉欧盟无线网卡反倾销
- 微信头像更新了,有你喜欢的吗?
- RISC-V指令集架构------RV32I基础整数指令集
- NVIDIA JETSON TX1刷机重装系统笔记
- C++编译动态库第三方库及使用
- STM32制作红外遥控和红外接收装置
- 隐藏驱动,绕过XueTr 0.39检测
- 「游戏建模」写实武器如何建模?各种软件齐上阵,武器建模设计教程
- 会发光的微笑和会脸红的墙:微软实现建筑与人工智能的完美融合