可改变背景色的动态粒子特效

一款可改变背景色的动态粒子特效，除了鼠标移动时有粒子的互动效果外，鼠标的左键点击也可以改变页面的背景色。

分类：html5 > canvas 难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需远程调用font-awesome图标字体库，并引入页面的样式文件，代码如下：

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，需设置好粒子特效的容器和下面两个图标按钮，代码如下：

<p>点击可换背景色</p>
<canvas></canvas>
<!-- Social -->
<div class="twitter social-icon">
  <a href="http://www.sucaihuo.com" target="_blank"></a>
  <i class="fa fa-weixin fa-lg"></i>
</div>

<div class="youtube social-icon">
  <a href="http://www.sucaihuo.com" target="_blank"></a>
  <i class="fa fa-qq fa-lg"></i>
</div>

页面的底部，需引入必要的JS文件，来响应鼠标移动和点击等事件，这里用了部分ES6的语法，代码如下：

<script type="text/javascript" src="js/index.js"></script>