使用particles.js基于Canvas画布实现带有粒子动态背景的登录页面示例
如果不想用图片作为页面的背景，使用particles.js实现粒子动态背景是种不错的选择，效果看起来也很高大上。本文将使用Bootstrap+particles.js实现原子颗粒动态背景特效。
入门指南
使用教程
1、引入依赖库(particles.js核心库，jQuery,Bootstrap可选)
<link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/particles.js"></script>
2、CSS样式
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background: #b61924;
}
.login-wrapper {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
margin-top: 30%;
padding: 2em 2em;
background: rgba(22, 26, 33, 0.8);
border-radius: 6px;
}
.login-title {
color: #fff;
text-align: center;
margin-bottom: 26px;
font-weight: normal;
font-size: 15px;
}
3、HTML标签（部分代码)
<div id="particles-js">
<div class="container">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<h1 class="login-title">particles.js示例-带有原子粒子背景特效登录页面</h1>
<form action="#" method="post">
<div class="form-group has-feedback">
<input type="email" class="form-control" placeholder="邮 箱">
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="密 码">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-12">
<button type="submit" class="btn btn-danger btn-block btn-flat">登 录</button>
</div>
</div>
</form>
<br>
<p class="text-right"><a href="#">忘记密码?</a><a href="#" class="text-center">注册账号</a></p>
</div>
</div>
</div>
</div>
4、JavaScript脚本
//ParticlesJS 配置信息
particlesJS("particles-js", {
"particles": {
"number": {
"value": 90,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "triangle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 50,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.6,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 120,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 500,
"size": 50,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.6
},
"push": {
"particles_nb": 6
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
这样就完成了particles.js实现的带有粒子动态背景登录页面示例。想看完整的示例，请点击右边的“查看演示”按钮进行预览，或者直接点击“立即下载”按钮进行下载参看。
the end
