绿色粒子背景特效

最新推荐文章于 2024-04-26 09:45:28 发布

孔哈哈

最新推荐文章于 2024-04-26 09:45:28 发布

阅读量584

点赞数 1

分类专栏： js笔记

js笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

代码结构

在这里插入图片描述

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>

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)

孔哈哈

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
绿色粒子背景特效

代码结构index.html<!doctype html><html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <title>linhongcun</title> <meta ...
复制链接

扫一扫