动态色彩流动的登录页面

动态色彩流动的登录页面

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

推荐阅读更多精彩内容

  • 原文链接:https://github.com/opendigg/awesome-github-android-u...
    IM魂影阅读 30,839评论 6 469
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 7,119评论 4 39
  • 一、关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多。比如说光棍节很疯狂的淘宝商城页面。 这...
    四季变幻阅读 637评论 0 6
  • 转眼间,调到营运将近一年,心酸冷暖自知。在此期间,一头栽在新的岗位上,无年无节,不眠不休。没日没夜的工作,...
    辰寅阅读 47评论 0 0
  • 什么是 AJAX ? AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可...
    zouyang0921阅读 5,149评论 0 1