网页炫酷背景

前言：
做网页项目时想要背景是动态的，推荐两个我觉得比较可以的js动态背景。

1. 随鼠标的移动而移动的线条，具体效果看图：
   
   你焦点在哪，那么那里的线条就会汇聚到你的焦点处。
   用法：将js声明到body内即可，我是放置在body底部的

<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

2. 可以鼠标点击产生字的，如图：
   用法和第一个类似，不过在这个js文件前得先引入jquery:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script type="text/javascript">
			/* 鼠标特效 */
			var a_idx = 0;
			jQuery(document)
					.ready(
							function($) {
								$("body")
										.click(
												function(e) {
													var a = new Array("@健身",
															"@学习", "@机车",
															"@摄影", "@自由",
															"@考研", "@自律",
															"@独立", "@厨艺",
															"@橘子", "@交友",
															"@爱媳妇", "@爱家人");
													var $i = $("<span></span>")
															.text(a[a_idx]);
													a_idx = (a_idx + 1)
															% a.length;
													var x = e.pageX, y = e.pageY;
													$i
															.css({
																"z-index" : 999999999999999999999999999999999999999999999999999999999999999999999,
																"top" : y - 20,
																"left" : x,
																"position" : "absolute",
																"font-weight" : "bold",
																"color" : "rgb("
																		+ ~~(255 * Math
																				.random())
																		+ ","
																		+ ~~(255 * Math
																				.random())
																		+ ","
																		+ ~~(255 * Math
																				.random())
																		+ ")"
															});
													$("body").append($i);
													$i.animate({
														"top" : y - 180,
														"opacity" : 0
													}, 1500, function() {
														$i.remove();
													});
												});
							});
		</script>

这里使用的是cdn形式的jquery即不用将jq放入本地文件再引入，直接访问网络上的jq即可，还有就是点击产生的字可以自行修改。