动态色彩流动的登录页面

看了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/

网友评论

土豆土豆我是土豆:学习了
_理想的现实主义者:我以为楼主自己写的……一看用的插件……
程序鱼:@_理想的现实主义者其实那个插件的实现逻辑我引用那篇文章的作者已经说的很清楚了，我也是偷了个懒
_理想的现实主义者:@程序鱼我没别的其他的意思……只是看见推送……是想看看逻辑……点进来就看到初始化……不过还是感谢楼主，我又多了解个插件
程序鱼:@_理想的现实主义者插件只是工具，帮助你实现自己想要效果的工具，我还用jQuery了，你怎么不说我没自己写个jQuery