绿色粒子背景特效

代码结构

index.html

    
        
        
        
        
        
        
        
    

    
        
        

            
            

                
CSDN
                
https://blog.csdn.net/larger5
            
        
    

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

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

Particleground.js

(https://github.com/jnicol/particleground/archive/master.zip)