動態(tài)色彩流動的登錄頁面

看了QQ 9.0 的登錄頁面，感覺還可以，自己也嘗試去山寨一個~

qq.png

最后實現(xiàn)的效果

用js+css實現(xiàn)色彩動態(tài)的流動效果

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/