各种炫酷的特效html代码,网页样式——各种炫酷效果及实现代码

原标题：网页样式——各种炫酷效果及实现代码

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>

回到顶部