鼠标点击出现爱心动效

起这么个标题，感觉瞬间回到了那个前端蛮荒的年代，各种滑动门特效。。。

还是在同一个博客上扒到的效果，地址在这 点我

代码语言：javascript复制

$("html,body").click(function(e) {
	var gcd = new Array("♥", "♥", "♥");
	var n = Math.floor(Math.random() * gcd.length);
	var $i = $("<b/>").text(gcd[n]);
	var x = e.pageX,
		y = e.pageY;
	$i.css({
		"z-index": 99999,
		"top": y - 20,
		"left": x - 8,
		"position": "absolute",
		"color": "#FF706C",
		"animation": 'heartbeat .25s infinite .15s'
	});
	$("body").append($i);
	$i.animate({
		"opacity": 0
	}, 1500, function() {
		$i.remove()
	});
	e.stopPropagation()
});

代码语言：javascript复制

/*鼠标点击爱心跳动特效 start*/
@keyframes heartbeat {
0% {transform: scale(1);}
5% {transform: scale(1.3);}
10% {transform: scale(1.1);}
15% {transform: scale(1.5);}
50% {transform: scale(1);}
100% {transform: scale(1);}
}

博客 前端 特效

0 人点赞