一个简单的网页,布局、样式、交互 等都做得不错了,接下来就该来点网页背景特效了
1、Particleground.js 相关介绍与下载应用
Ⅰ、官方演示站点:http://www.jq22.com/yanshi566
Ⅱ、demo下载链接:https://github.com/jnicol/particleground/archive/master.zip
Ⅲ、git方式 下载 demo:git clone https://github.com/jnicol/particleground.git
Ⅳ、参考文章:jQuery粒子系统插件Particleground
2、本文效果图
①粒子自动会运行联合
②鼠标移动所有粒子也会跟着移动
talk is cheap show me the code
可以修改的地方都有注释
官方 demo
可以删除的地方基本都删了
其他的地方最好不要动
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<title>linhongcuntitle>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='js/jquery.particleground.js'>script>
<script type='text/javascript' src='js/demo.js'>script>
head>
<body>
<div id="particles">
<div id="intro">
<h1>CSDNh1>
<p>https://blog.csdn.net/larger5p>
div>
div>
body>
html>
document.addEventListener('DOMContentLoaded', function () {
particleground(document.getElementById('particles'), {
//粒子颜色
dotColor: '#cbda5a',
//线颜色
lineColor: '#eda'
});
var intro = document.getElementById('intro');
intro.style.marginTop = - intro.offsetHeight / 2 + 'px';
}, false);
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;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
/* 修改背景颜色 */
background: #354;
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;
}
p {
margin: 0 0 30px 0;
font-size: 24px;
}
以后有心情再更新实用特效插件