网页粒子特效背景 Particleground.js 的简单引入

一、前言

一个简单的网页,布局、样式、交互 等都做得不错了,接下来就该来点网页背景特效了

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 可以删除的地方基本都删了
其他的地方最好不要动

1、代码结构

这里写图片描述

2、index.html

<!doctype html>
<html lang="en" class="no-js">

    <head>
        <meta charset="UTF-8" />
        <title>linhongcun</title>
        <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>CSDN</h1>
                <p>https://blog.csdn.net/larger5</p>
            </div>
        </div>
    </body>

</html>

3、demo.js

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);

4、style.css

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;
}

三、其他

以后有心情再更新实用特效插件

相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页