jQuery文字星星闪烁特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery文字星星闪烁特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery文字星星闪烁特效代码</title>
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" type="text/css" href="css/sparkle.css">
<style type="text/css">
	.content{
		width: 100%;
		height: 100%;
		position: relative;
		margin-top:100px;
	}
	#main {
		width: 500px;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
		display: inline-block;
		font-size: 250%;
		font-weight: 500;
	}
</style>
</head>
<body>
<div class="zzsc-container">
	<div class="content">
		<div id="main">
			 <h1 class="center">内容</h1>
		</div>
	</div>
</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/sparkle.jquery.js"></script>
<script type="text/javascript">
	$("#main").sparkle({
		fill:"#f7c916"	,
		stroke:"#fde3a7",
		size: 30,
	  }).sparkle({
		delay: 1000,
		pause: 750,
		size: 10
	  });
</script>
</body>
</html>

JS代码(sparkle.jquery.js):

(function($,window,document){
	$.fn.sparkle = function(options){
	$.destroySparkle = $.destroySparkle ||{
}
;
	var id = this.data("sparkle-id") || (new Date()).getTime() + Math.random();
	if (options === "destroy" && this.find("svg").length > 0){
	$.destroySparkle[id] = true;
	this.data("sparkle-id",null);
}
var $this = this;
	var settings = $.extend({
	fill:"#fff",stroke:"#000",size:20,delay:0,duration:1500,pause:1000}
,options);
	var cssAnimationAttr = "my-sparkle " + settings.duration + "ms infinite linear";
	var $star = $('<svg class="my-sparkle" version="1.1" viewBox="0.0 0.0 50.0 50.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l50.0 0l0 50.0l-50.0 0l0 -50.0z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="' + settings.stroke + '" fill-opacity="0.0" d="m0 0l50.0 0l0 50.0l-50.0 0z" fill-rule="nonzero"></path><path fill="' + settings.fill + '" d="m0.62204725 25.0l20.068499 -4.323374l4.309454 -20.13332l4.309454 20.13332l20.068499 4.323374l-20.068499 4.323374l-4.309454 20.133318l-4.309454 -20.133318z" fill-rule="nonzero"></path><path stroke="' + settings.stroke + '" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m0.62204725 25.0l20.068499 -4.323374l4.309454 -20.13332l4.309454 20.13332l20.068499 4.323374l-20.068499 4.323374l-4.309454 20.133318l-4.309454 -20.133318z" fill-rule="nonzero"></path></g></svg>').css({
	position:"absolute",width:settings.size,height:settings.size,zIndex:9999}
);
	var w = this.width();
	var h = this.height();
	var getCoordinates = function(){
	return{
	left:Math.random() * w,top:Math.random() * h}
;
}
;
	var placeStar = function(init){
	var coords = getCoordinates();
	if (init){
	$this.append($star);
}
$star.css({
	"-moz-animation":cssAnimationAttr,"-webkit-animation":cssAnimationAttr,animation:cssAnimationAttr,display:"block",left:coords.left,top:coords.top}
);
	window.setTimeout(function(){
	$star.css({
	"-moz-animation":null,"-webkit-animation":null,animation:null,display:"none"}
);
	if (!$.destroySparkle[id]){
	window.setTimeout(function(){
	placeStar(false);
}
,settings.pause);
}
else{
	$star.remove();
}
}
,settings.duration);
}
;
	if (this.css("position") === "static"){
	this.css("position","relative");
}
if (!$.destroySparkle[id]){
	window.setTimeout(function(){
	placeStar(true);
}
,settings.delay);
	this.data("sparkle-id",id);
}
return this;
}
;
}
)(jQuery,window,document);

CSS代码(sparkle.css):

@-moz-keyframes my-sparkle{0%{opacity:0;-moz-transform:rotate(0deg) scale(0);}
50%{opacity:1;-moz-transform:rotate(360deg) scale(1);}
100%{opacity:0;-moz-transform:rotate(720deg) scale(0);}
}
@-webkit-keyframes my-sparkle{0%{opacity:0;-webkit-transform:rotate(0deg) scale(0);}
50%{opacity:1;-webkit-transform:rotate(360deg) scale(1);}
100%{opacity:0;-webkit-transform:rotate(720deg) scale(0);}
}
@keyframes my-sparkle{0%{opacity:0;transform:rotate(0deg) scale(0);}
50%{opacity:1;transform:rotate(360deg) scale(1);}
100%{opacity:0;transform:rotate(720deg) scale(0);}
}

附件:下载该文件资源,减少时间成本(增值服务)