jQuery粒子动态背景特效js代码

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

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

以下是 jQuery粒子动态背景特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html> 
<html lang="en" class="no-js"> 
<head> 
  <meta charset="gb2312" /> 
  <title>jQuery���Ӷ�̬������Ч</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css" />
  <script type='text/javascript' src='js/jquery-1.11.1.min.js'></script>
  <script type='text/javascript' src='js/jquery.particleground.min.js'></script>
  <script type='text/javascript' src='js/demo.js'></script>
</head> 

<body>

<div id="particles">
	<div class="intro">
		<h1>Particleground</h1>
		<p>A jQuery plugin for snazzy background particle systems</p>
	</div>
</div>
</body> 
</html>

JS代码(demo.js):

/** * Particleground demo * @author Jonathan Nicol - @mrjnicol */
$(document).ready(function(){
	$('#particles').particleground({
	dotColor:'#5cbdaa',lineColor:'#5cbdaa'}
);
	$('.intro').css({
	'margin-top':-($('.intro').height() / 2)}
);
}
);

CSS代码(style.css):

/*CSS Resethttp://meyerweb.com/eric/tools/css/reset/*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* particleground demo */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;}
body{background:#16a085;font-family:'Montserrat',sans-serif;color:#fff;line-height:1.3;-webkit-font-smoothing:antialiased;}
#particles{width:100%;height:100%;overflow:hidden;}
.intro{position:absolute;left:0;top:50%;padding:0 20px;width:100%;text-align:center;}
h1{text-transform:uppercase;font-size:85px;font-weight:700;letter-spacing:0.015em;}
h1::after{content:'';width:80px;display:block;background:#fff;height:10px;margin:30px auto;line-height:1.1;}
p{margin:0 0 30px 0;font-size:24px;}
.btn{display:inline-block;padding:15px 30px;border:2px solid #fff;text-transform:uppercase;letter-spacing:0.015em;font-size:18px;font-weight:700;line-height:1;color:#fff;text-decoration:none;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;}
.btn:hover{color:#005544;border-color:#005544;}
@media only screen and (max-width:1000px){h1{font-size:70px;}
}
@media only screen and (max-width:800px){h1{font-size:48px;}
h1::after{height:8px;}
}
@media only screen and (max-width:568px){.intro{padding:0 10px;}
h1{font-size:30px;}
h1::after{height:6px;}
p{font-size:18px;}
.btn{font-size:16px;}
}
@media only screen and (max-width:320px){h1{font-size:28px;}
h1::after{height:4px;}
}

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