js抽象液体背景特效代码下载


js抽象液体背景特效代码下载
js抽象液体背景特效代码下载以及抽象液体背景等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/three.min.js"></script>
<script  src="js/script.js"></script>

3. HTML代码

<div id="container"></div>
<script id="vertexShader" type="x-shader/x-vertex">
  void main() {
	  gl_Position = vec4( position, 1.0 );
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif
#extension GL_OES_standard_derivatives : enable
uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
//参考: http://glslsandbox.com/e#57848.0
void main( void ){
	vec2 uv = ( gl_FragCoord.xy / resolution.xy )*4.0;
	vec2 uv0=uv;
	float i0=2.2;
	float i1=1.95;
	float i2=1.5;
	vec2 i4=vec2(0.0,0.0);
	for(int s=0;s<10;s++){
		vec2 r;
		r=vec2(cos(uv.y*i0-i4.y+time/i1),sin(uv.x*i0+i4.x+time/i1))/i2;
		r+=vec2(-r.y,r.x)*0.2;
		uv.xy+=r;
		i0*=1.93;
		i1*=1.25;
		i2*=1.7;
		i4+=r.xy*1.0+0.5*time*i1;
	}
	float r=cos(uv.x-time)*0.5+0.2;
	float b=sin(uv.y+time)*0.5-1.;
	float g=sin((sqrt(uv.x*uv.x+uv.y*uv.y)+time))*0.5-0.1;
	vec3 c=vec3(r,g,b);
	gl_FragColor = vec4(c,1.0);
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章