原标题：网页样式——各种炫酷效果及实现代码
1.evanyou 效果-彩带的实现，效果如下
注：这个主要用的是 Canvas 画布实现的，点击背景绘制新的图形，代码如下：
/*Html代码:*/
/*CSS代码:*/
#evanyou{
position:fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
/*JS代码:*/
// evanyou效果
varc = document.getElementById( 'evanyou'),
x = c.getContext( '2d'),
pr = window.devicePixelRatio || 1,
w = window.innerWidth,
h = window.innerHeight,
f = 90,
q,
m = Math,
r = 0,
u = m.PI * 2,
v = m.cos,
z = m.random;
c.width = w * pr;
c.height = h * pr;
x.scale(pr, pr);
x.globalAlpha = 0.6;
functionevanyou(){
x.clearRect( 0, 0, w, h)
q = [{ x: 0, y: h * .7+ f }, { x: 0, y: h * .7- f }]
while(q[ 1].x < w + f) d(q[ 0], q[ 1])
}
functiond(i, j){
x.beginPath()
x.moveTo(i.x, i.y)
x.lineTo(j.x, j.y)
vark = j.x + (z() * 2- 0.25) * f,
n = y(j.y)
x.lineTo(k, n)
x.closePath()
r -= u / -50
x.fillStyle = '#'+ (v(r) * 127+ 128<< 16| v(r + u / 3) * 127+ 128<< 8| v(r + u / 3* 2) * 127+ 128).toString( 16)
x.fill()
q[ 0] = q[ 1]
q[ 1] = { x: k, y: n }
}
functiony(p){
vart = p + (z() * 2- 1.1) * f
return(t > h || t < 0) ? y(p) : t
}
document.onclick = evanyou
document.ontouchstart = evanyou
evanyou();
View Code
//Html代码:
body>
回到顶部
