动态色彩流动的登录页面

看了QQ 9.0 的登录页面，感觉还可以，自己也尝试去山寨一个~

qq.png

最后实现的效果

用js+css实现色彩动态的流动效果

image.png

登录loading页面

image.png

在线演示页面：https://lucienyang.github.io/colorful-login-page/
使用非常简单，给一个id colorful-container
首先引入js

<script type="text/javascript" src="./js/pixi.min.js"></script>
<script type="text/javascript" src="./js/colorful-min.js"></script>

定义一个div，然后加载初始化js

colorfulBackground({
  container: document.getElementById('colorful-container'),
  animation: true,
  size: [1000, 1000],
  grid:[3,2],
  speed:10
});

使用的js库
pixijs
colorful.js
参照了http://www.zhangxinxu.com/wordpress/2017/12/canvas-pixi-js-iphonex-colorful-wallpaper-background/