在下研究了一下源代码,渗透到了服务器找了一下:
并强行爆破了一下
最终发现,这是引入了Font Awesome图标,并启用css3动画所制成的
原理为:
用Font Awesome引入一个心形,并用css设置为红色,再用css3关键帧动画使其放大缩小
这是从官网瓢来的源代码:(请确认已引入Font Awesome)
<i class="fa fa-heart" style="font-size:48pxcolor:redanimation:iconAnimate 5s"></i>
css3代码如下
@keyframes iconAnimate {
0%, 100% {
transform: scale(1)
}
10%, 30% {
transform: scale(0.9)
}
20%, 40%, 60%, 80% {
transform: scale(1.1)
}
50%, 70% {
transform: scale(1.1)
}
}
修改相关的参数,可以达到爆炸效果
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>twitterLove</title>
</head>
<body>
<canvas width="100" height="100" style="border: 1px black solid">
必须要把style写在内联,不然会变成椭圆。而且width与height要单独写出来
注意:1,每画一个图形都要提起笔。不然会连在一起
2,arc的(centerX[圆心横坐标,以父节点的右上角为坐标原点,向左向下建立坐标轴],centerY,r[半径],
startAngle[起始点的角度。起始以(1,0)表示0,(0,1)表示3/2*PI计算。当设置为逆时针的时候画出来是起点到终点之间的扇形出去中心三角],
endAngle,anticlockwise(是否逆时针))
3,画图的时候要计算好坐标
4,最好以角度值百分比计算。流式布局更能适应各种大小的缩放
5,注意提取公共函数
6,要划分步骤
7,注意上一幅图与下一幅图的关系。用clearRect来清除
</canvas>
<script>
var canvas=(document.getElementsByTagName("canvas"))[0]//获取绘图区域,是一个正方形区域
var ctx=canvas.getContext("2d")//获取画笔
//必须写在外面,公共的
var centerX=(canvas.width)*0.5
var centerY=(canvas.height)*0.5//获取中心,是一个正方形
//获得一个爱心
function love(color,centerX,centerY,size){
ctx.beginPath()
//上半部
var smallRadius=Math.round(centerX/size)//小圆的半径
var smallMoveLen=smallRadius*Math.sqrt(3)/2
ctx.fillStyle=color||"red"
ctx.arc(centerX-smallMoveLen,centerY,smallRadius,Math.PI*7/4,Math.PI,true)
ctx.arc(centerX+smallMoveLen,centerY,smallRadius,0,Math.PI*5/4,true)
//下半部
var bigRadius=smallRadius*2.73
ctx.arc(centerX+smallMoveLen,centerY,bigRadius,Math.PI,Math.PI*0.6,true)
ctx.arc(centerX-smallMoveLen,centerY,bigRadius,Math.PI*0.4,0,true)
ctx.fill()
ctx.closePath()
}
love("grey",centerX,centerY,8)//默认灰色
//注册监听
canvas.addEventListener("click",function () {
if(ctx.fillStyle=="#808080"){//表示为灰色
// alert("点赞")
//1,爱心消失//清除画板内容
ctx.clearRect(0,0,centerX*2,centerY*2)
//动态图
var bigRadius=centerX/2
var midRadius=centerX/5
var smallRadius=centerX/10
//2,小圆,圆心都是中心位置
setTimeout(function () {
ctx.beginPath()
ctx.fillStyle="#FF6BDB"
ctx.arc(centerX,centerY,smallRadius,0,2*Math.PI,false)
ctx.fill()
ctx.closePath()//必须要提笔。不然和前面一只笔相当于没提起来
},100)
//3,中圆
setTimeout(function () {
ctx.beginPath()
ctx.fillStyle="#9FD5FF"
ctx.arc(centerX,centerY,midRadius,0,2*Math.PI,false)
ctx.fill()
ctx.closePath()
},200)
//4,大圆
setTimeout(function () {
ctx.beginPath()
ctx.fillStyle="#FF84A6"
ctx.arc(centerX,centerY,bigRadius,0,2*Math.PI,false)
ctx.fill()
ctx.closePath()
},300)
//5,小爱心
setTimeout(function () {
ctx.clearRect(0,0,centerX*2,centerY*2)
ctx.beginPath()
ctx.fillStyle="#FF84A6"
ctx.arc(centerX,centerY,bigRadius,0,2*Math.PI,false)
ctx.fill()
ctx.closePath()
ctx.beginPath()
ctx.fillStyle="#ffffff"
ctx.arc(centerX,centerY,midRadius*2,0,2*Math.PI,false)
ctx.fill()
ctx.closePath()
ctx.beginPath()
love("purple",centerX,centerY,16)
ctx.closePath()
},400)
//6,四周小圆
setTimeout(function () {
ctx.clearRect(0,0,centerX*2,centerY*2)
var e=bigRadius/(Math.sqrt(2))
var centerXArr=[centerX-bigRadius,centerX-e,centerX,centerX+e,centerX+bigRadius,centerX+e,centerX,centerX-e]
var centerYArr=[centerY,centerY-e,centerY-bigRadius,centerY-e,centerY,centerY+e,centerY+bigRadius,centerY+e]
for(var i=0i<8i++){
ctx.beginPath()
ctx.fillStyle="blue"
ctx.arc(centerXArr[i],centerYArr[i],smallRadius/4,0,2*Math.PI,false)
ctx.fill()
ctx.closePath()
}
ctx.fillStyle="#ff0000"
love("ff0000",centerX,centerY,8)//red
},500)
//7,红色大爱心
setTimeout(function () {
ctx.clearRect(0,0,centerX*2,centerY*2)
ctx.beginPath()
love("ff0000",centerX,centerY,8)
ctx.closePath()
},600)
}
else if(ctx.fillStyle=="#ff0000"){//表示为红色
// alert("取消赞")
ctx.fillStyle="#ff0000"
love("#808080",centerX,centerY,8)
}
},false)
</script>
</body>
</html>
0刘德华《男儿志》http://www.lanmo.com.cn/sounds/npGhlaObqbKZmzM$.mp31郑智化《水手》http://media.game365.org:8080/song/l2ZqaTU$.mp3
2成龙《真心英雄》http://freeweb.nyist.net/~chunqiu/kuro/5Pv0LmILHQj1BdUEEDY$.mp3
3成龙《壮志在我胸》http://www.yphy.net/song/q6ytq602.mp3
4王杰《祈祷》http://16sun.my03.com/wb/elu/bz/02/VnVpWXp6XHpmV3V2Ylt6fFZ4aFl3elx8dDI$.mp3
5 I Will Always Return 电影小马精灵原声曲 主唱http://ccsk.0943.com.cn/baobao/photo/gamego.mp3
6励志歌伴舞 《我真的很不错》 http://www.bxfw.com/xbase/rise/AVSEQ03.rm
7周华健『风雨无阻』http://www.881bb.com/mp3/YWUz.mp3
8成龙《问心无愧》http://hlfujin.gov.cn/YINYUE/YINYUE/chenglong/qKqqnzU$.mp3
9《步步高》http://www.591bbk.com/bbkmusic.rm
10刘欢《从头再来》http://www.hsez.net/teacher/qlb/yinyue/lKGhmzU$.mp3
11《爱拼才会赢》http://www.tdzx.net/ypdb/record/4eD56Of78hkE4DM$.MP3
12周杰伦《蜗牛》http://www.bcyzl.nease.net/lanhua/iKGBnao2.mp3
13许美静《阳光总在风雨后》http://www.dqshyouth.com.cn/tsgl/UploadSong/Y2JjZ2ZoaG5iaGRlZmhta2cy.mp3
14张雨生《我的未来不是梦http://www.csszx.com/jks/jyky/fzg/Ymsz.mp3
15周华健《心的方向》 http://202.194.137.18/audios/02%20周华健/Afbo-OzzBiox.MP3
16《sailing》http://xdy2000.nease.net/mp3/pJOcoJ6knjg$.mp3
17臧天朔《朋友》http://www.wjsgjzx.com.cn/person/qianhairong/wjj/oasz.mp3
18王菲《执迷不悔》http://www.hlfujin.gov.cn/yinyue/yinyue/wf/q5-VnDU$.mp3
19零点乐队《相信自己》http://jiss-www.sd.cninfo.net/xiaodong/xiaodong/mp3/music/mp3/qaqtnjU$.mp3
20张国荣《共同渡过》http://mp3.top000.com/6uQA4Ov~8DUx.mp3
21《WE ARE THE CHAMPIONS》http://www.lanmo.com.cn/sounds/npGqmZSXqZ2QlZuVoqagp5-lMw$$.mp3
22有用的人-【小孩不笨】主题曲http://www.leemusic.com/mp3/youyongderen.mp3
23风雨彩虹铿锵玫瑰 - 田震 http://www.qingkai.com/upload/music/npecm6qfNw$$.mp3
铿锵玫瑰 - 林忆莲 http://www.gjz.gov.cn/gjz/xxsk/web/music/naufk6elqp0x.mp3
24奔跑 - 黄征 羽泉http://www.dlfuhai.com/student/del/song/k5ehpJalNw$$.mp3
25《I believe I can fly》http://www.soudog.net/UpLoadFiles/Y2JjaGZmb2pjY2tna2tsOA$$.mp3
26欧阳菲菲《感恩的心》http://www.bookhome.com.cn/kxl/music/downmusic/9ukEKOz87v5WZGNhWmhn8AHoKun5Bvs4.mp3
27爱自己-羽·泉http://61.150.115.77:8000/music/羽泉/4eAKCPHwNw$$.MP3
28我要的幸福—孙燕姿http://razx.zhedu.net.cn/student/xywh/wytd/mp3/qKuXrJs2.mp3
29《真的爱你〉http://16sun.my03.com/wb/elu/bz/04/Bhjo-OXk-xtelJitpKSbOA$$.mp3
30《海阔天空〉http://news.yournet.com.cn/theme/20040801/mp3/k5eso6OaXGphX1hmZVuZmVaTZlmYZlyZk1eWl1qbml2TmFiYajY$.mp3
31《光辉岁月〉http://deyu.pudong-edu.sh.cn/notycn/mp3/mp3/mKeUopyerKGkp5ytqps3.mp3
32朋友别哭http://www.jm-it.com/hy/mp3/9iUGBeYm9hbU2ggx~~PnHtTbMw$$.mp3
33刘德华 柯受良 吴宗宪-笨小孩http://www.yjriver.com/xxyd/mp3/4vED1e~YZYWBZVM0
34陆毅-壮志雄心http://www.newstock.com.cn/pubftp/8-8FF2IN6g7vAg4E-TY$.mp3
35五月天-终结孤单http://www.csyx.com.cn/movie/Rock/q5qiopw2.mp3
36when you believe-MARIAH CAREY http://down.miss58.com/music/mariah%20carey/npOlnZaeXGphlZSmmq9camFfWGZlrZ-dn1dlZK6lrF1jYpWZoZ-crpYy.mp3
37张敬轩my way http://218.4.47.214/翻斗乐/nqtYZmWtmLEx.mp3
38刘德华<踢出个未来>http://music.nxu.edu.cn/music/刘德华/~RHmKu0sBezx5jM$.mp3
39男儿当自强http://www.i100ok.com/mp3/ZWVrNA$$.mp3
40Hero-MariaH Carey http://www.cqbxzx.com/teacher/mike/mZelozU$.mp3
41屠洪刚-精忠报国http://www.slkf.net/gq/m6yVmzU$.mp3
42超越梦想http://music.nxu.edu.cn/music/中国中球/5N4z.mp3
43挥着翅膀的女孩http://www.hjbbs.com/uploadfile/Y2JjaGdsaG1mYmdtZm5saWYy.mp3
44我要飞http://www.happychina.cn/userweb/4860/Y2JjaGVvaHBjYmVtZ29lpaFlUzQ$
45人生无悔 刘欢http://www.liuzhong.xm.fj.cn/lzmusic/song/china/liuhuan/TRACK11.MP3