html5 特效 背景 腾讯,html5腾讯QQ登录界面背景动画特效
特效描述:html5 腾讯QQ 登录界面 背景动画特效。腾讯QQ登陆界面动态背景,直接从腾讯网站获取,js代码有加密,做了个简单地示例
代码结构
1. 引入JS
2. HTML代码
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
$(function () {
if (!window.ActiveXObject && !!document.createElement("canvas").getContext) {
$.getScript("cav.js",
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失败');
}
});
html5 特效 背景 腾讯,html5腾讯QQ登录界面背景动画特效相关推荐
- Android实现仿QQ登录界面背景动画效果
登录QQ的时候,我们会看到在登录界面的背景不是静态的,而是一段动画效果,刚开始觉得蛮好奇的,现在我们也来实现一下这种效果,实现起来还是挺简单的. 实现步骤: 1.自定义CustomVideoView类 ...
- 怎么修改计算机密码界面的背景,怎么修改Win7登录界面背景图片(欢迎界面背景图片)?...
怎么修改Win7登录界面背景图片(欢迎界面背景图片)?之前自己曾设置过,当时没有想到分享给朋友们!现在把这个帖子补上,先来看下效果图片,笔者将其换成了苹果Mac的登陆界面!只要您能从中获得乐趣,其实这 ...
- 腾讯开放平台 手机QQ登录 错误码:110406 解决办法
作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/4204284.html 原创文章,转载请注明作者和出处,未经允许不可用于商业营利活动 腾讯开发平台 ...
- 怎么改锁定计算机的背景,电脑修改登录界面背景壁纸的操作方法
原标题:"Win7系统电脑修改登录界面背景壁纸的操作步骤"相关电脑问题教程分享. - 来源:191路由网. Win7系统电脑怎么修改电脑登录界面?有用户喜欢对系统做一些个性化设置, ...
- 解决win11/win10在登陆界面(解锁界面)点击获取每日壁纸无效的问题 - get Daily Lockscreen and Wallpaper - Win11/10的登录界面背景图片在哪里?
效果图 点击链接无法下载图片,登陆后一点反应都没有... 本地的Win11/10登录界面背景图片储存位置 C:\Users\你的用户名\AppData\Local\Packages\Microsoft ...
- 运用HTML5+CSS3和CSS滤镜做的精美的登录界面
原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...
- php仿qq登录界面安卓,Android_Android仿QQ登陆窗口实现原理,今天根据腾讯qq,我们做一个 - phpStudy...
Android仿QQ登陆窗口实现原理 今天根据腾讯qq,我们做一个练习,来学习如何制作一个漂亮的布局.首先看一下官方图片 还是一个启动画面,之后进入登录页面,导航页面就不介绍了,大家可以参考微信的导航 ...
- html加载特效大全,10种炫酷的CSS3 loading加载动画特效
这是一组效果非常炫酷的纯CSS3 loading加载动画特效.这组loading动画共10种不同的效果,全部使用animation帧动画制作而成.这些特效代码简洁,效果炫酷,非常值得学习借鉴. 制作方 ...
- 修改Windows7登录界面背景图片的方法
不用借助第三方软件修改windows7登陆界面背景图片的方法: 1.按win+R快捷键打开运行界面在上面的对话框中输入"regedit":接着单击"确定"打开注 ...
最新文章
- CSS 学习笔记——CSS Selector
- 【light 1341Aladdin and the Flying Carpet】
- license 验证服务器唯一机器码_代码审计工具Fortify 17.10及Mac平台license版本
- JVM内存分为哪几部分?各个部分的作用是什么?
- .NET平台开源项目速览(12)哈希算法集合类库HashLib
- hadoop中两种上传文件方式
- html5文件域的自动获取,HTML5 文件域+FileReader 读取文件(一)
- JavaScript学习总结(9)——JS常用函数(一)
- 酷睿i7cpu适合的linux,[图]英特尔酷睿i7 1165G7和AMD Ryzen 7 Pro 4750U Linux性能对比
- 2、硬件工程师之元器件学习—电阻(二)
- 计算机网络连接叹号,【电脑网络连接感叹号】电脑网络连接感叹号怎么回事_电脑网络连接感叹号怎么办_亲亲宝贝网...
- 以太坊数据结构与存储分析
- 高新技术企业申报材料汇编
- 移动端网页站点调用拨打电话发送短信等功能
- IT工作人员健康指南
- 原生js写一个简单的编辑器
- 如何理解金融中的 “头寸”
- 隔一段时间撸一次,特别香,HashMap中remove、getOrDefault源码,一遍一遍、又一遍
- 关于最新劳动法的一些解读
- WEB模式与图书馆模式探讨