HTML5 QQ登录背景动态图片

原文:HTML5 QQ登录背景动态图片

预览效果如图所示：

代码如下：

<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>html5背景</title><style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}</style><script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="container" style="width:100%;height:700px;"><div id="anitOut"></div>
</div><script type="text/javascript">
$(function () {if (!window.ActiveXObject && !!document.createElement("canvas").getContext) {$.getScript("http://im-img.qq.com/pcqq/js/200/cav.js?_=1428576021379",function () {var t = {width: 1.5,height: 1.5,depth: 10,segments: 12,slices: 6,xRange: 0.8,yRange: 0.1,zRange: 1,ambient: "#525252",diffuse: "#FFFFFF",speed: 0.0002};var G = {count: 2,xyScalar: 1,zOffset: 100,ambient: "#002c4a",diffuse: "#005584",speed: 0.001,gravity: 1200,dampening: 0.95,minLimit: 10,maxLimit: null,minDistance: 20,maxDistance: 400,autopilot: false,draw: false,bounds: CAV.Vector3.create(),step: CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1))};var m = "canvas";var E = "svg";var x = {renderer: m};var i, n = Date.now();var L = CAV.Vector3.create();var k = CAV.Vector3.create();var z = document.getElementById("container");var w = document.getElementById("anitOut");var D, I, h, q, y;var g;var r;function C() {F();p();s();B();v();K(z.offsetWidth, z.offsetHeight);o()}function F() {g = new CAV.CanvasRenderer();H(x.renderer)}function H(N) {if (D) {w.removeChild(D.element)}switch (N) {case m:D = g;break}D.setSize(z.offsetWidth, z.offsetHeight);w.appendChild(D.element)}function p() {I = new CAV.Scene()}function s() {I.remove(h);D.clear();q = new CAV.Plane(t.width * D.width, t.height * D.height, t.segments, t.slices);y = new CAV.Material(t.ambient, t.diffuse);h = new CAV.Mesh(q, y);I.add(h);var N, O;for (N = q.vertices.length - 1; N >= 0; N--) {O = q.vertices[N];O.anchor = CAV.Vector3.clone(O.position);O.step = CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1));O.time = Math.randomInRange(0, Math.PIM2)}}function B() {var O, N;for (O = I.lights.length - 1; O >= 0; O--) {N = I.lights[O];I.remove(N)}D.clear();for (O = 0; O < G.count; O++) {N = new CAV.Light(G.ambient, G.diffuse);N.ambientHex = N.ambient.format();N.diffuseHex = N.diffuse.format();I.add(N);N.mass = Math.randomInRange(0.5, 1);N.velocity = CAV.Vector3.create();N.acceleration = CAV.Vector3.create();N.force = CAV.Vector3.create()}}function K(O, N) {D.setSize(O, N);CAV.Vector3.set(L, D.halfWidth, D.halfHeight);s()}function o() {i = Date.now() - n;u();M();requestAnimationFrame(o)}function u() {var Q, P, O, R, T, V, U, S = t.depth / 2;CAV.Vector3.copy(G.bounds, L);CAV.Vector3.multiplyScalar(G.bounds, G.xyScalar);CAV.Vector3.setZ(k, G.zOffset);for (R = I.lights.length - 1; R >= 0; R--) {T = I.lights[R];CAV.Vector3.setZ(T.position, G.zOffset);var N = Math.clamp(CAV.Vector3.distanceSquared(T.position, k), G.minDistance, G.maxDistance);var W = G.gravity * T.mass / N;CAV.Vector3.subtractVectors(T.force, k, T.position);CAV.Vector3.normalise(T.force);CAV.Vector3.multiplyScalar(T.force, W);CAV.Vector3.set(T.acceleration);CAV.Vector3.add(T.acceleration, T.force);CAV.Vector3.add(T.velocity, T.acceleration);CAV.Vector3.multiplyScalar(T.velocity, G.dampening);CAV.Vector3.limit(T.velocity, G.minLimit, G.maxLimit);CAV.Vector3.add(T.position, T.velocity)}for (V = q.vertices.length - 1; V >= 0; V--) {U = q.vertices[V];Q = Math.sin(U.time + U.step[0] * i * t.speed);P = Math.cos(U.time + U.step[1] * i * t.speed);O = Math.sin(U.time + U.step[2] * i * t.speed);CAV.Vector3.set(U.position, t.xRange * q.segmentWidth * Q, t.yRange * q.sliceHeight * P, t.zRange * S * O - S);CAV.Vector3.add(U.position, U.anchor)}q.dirty = true}function M() {D.render(I)}function J(O) {var Q, N, S = O;var P = function (T) {for (Q = 0, l = I.lights.length; Q < l; Q++) {N = I.lights[Q];N.ambient.set(T);N.ambientHex = N.ambient.format()}};var R = function (T) {for (Q = 0, l = I.lights.length; Q < l; Q++) {N = I.lights[Q];N.diffuse.set(T);N.diffuseHex = N.diffuse.format()}};return {set: function () {P(S[0]);R(S[1])}}}function v() {window.addEventListener("resize", j)}function A(N) {CAV.Vector3.set(k, N.x, D.height - N.y);CAV.Vector3.subtract(k, L)}function j(N) {K(z.offsetWidth, z.offsetHeight);M()}C();})} else {alert('调用cav.js失败');}
});
</script>
</body>
</html>

HTML5 QQ登录背景动态图片相关推荐

php聊天动图,如何制作微信动态表情真人qq聊天搞笑动态图片多人摇头娃娃在线制作...
呼呼,总算是完成了哦,最后就是保存摇头娃娃啦,单击"另存为"按钮-"保存为单独文件",在随即弹出的保存页面里面,设置图片的保存路径并为图片命名,最后选择&quo ...
Android QQ登录,分享,分享图片
近年来三方导流,方便用户使用App,以及方便App数据分享越来越多的App支持了三方登录以及三方分享网页和图片.在此,整理了一系列三方库的集成方法以及集成中遇到的问题 . 一:引用 1:Maven引用 ...
html纯css类似qq登录的动态背景,QQ登录蓝色动态背景JS实现
QQ2019版登录界面的蓝色背景 JS实现代码 $(function () { if (!window.ActiveXObject && !!document.createElemen ...
Android实现仿QQ登录界面背景动画效果
登录QQ的时候,我们会看到在登录界面的背景不是静态的,而是一段动画效果,刚开始觉得蛮好奇的,现在我们也来实现一下这种效果,实现起来还是挺简单的. 实现步骤: 1.自定义CustomVideoView类 ...
仿手机QQ 登录、注册、找回密码、好友列表、QQ状态等功能的实现
仿手机QQ 登录.注册.找回密码.好友列表.QQ状态等功能的实现全文图 + 代码 .... 福利!!!(QQ登录背景,过度页面背景) 1.加载过程中的背景 2.登录页面 ==1. 登录页面布局 ...
html5 特效背景腾讯,html5腾讯QQ登录界面背景动画特效
特效描述:html5 腾讯QQ 登录界面背景动画特效.腾讯QQ登陆界面动态背景,直接从腾讯网站获取,js代码有加密,做了个简单地示例代码结构 1. 引入JS 2. HTML代码 *{margin: ...
html5怎么在index设置背景,index.html · huangliusong/HTML5Canvas知乎登录页面动态线条背景动画代码 - Gitee.com...
HTML5+Canvas知乎登录页面动态线条背景动画代码 body{ text-align: center; background: #F7FAFC; overflow: hidden; backgr ...
java登录界面背景设置,一个java写的QQ登录的界面，请问背景图片如何设置
一个java写的QQ登录的界面,请教背景图片怎么设置 import java.awt.Color; import java.awt.Font; import javax.swing.ImageIcon ...
Unity Shader(一) Lowpoly动态低多边形 (QQ登录界面低边动画)
前言在逛论坛的时候偶然发现有人在问动态低多边形(Lowpoly)是如何实现的,因为经常编写UGUI拓展对顶点操作较为熟悉的我立马就想到利用继承UnityEngine.Graphic,重写OnPopu ...
原创安卓手机QQ7.0登录界面动态背景视频实现方案
qq7.0登录界面动态背景实现 qq7.0登录界面动态视频背景实现 android动态视频背景 android动态背景分析qq7.0: 视频在打开登录界面就开始播放了,而且期间无黑屏而且是循环播 ...

HTML5 QQ登录背景动态图片

HTML5 QQ登录背景动态图片相关推荐

最新文章

热门文章