<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Relaxing Recursive React Regl Component</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="root"></div>
<script id="fragmentShader" type="x-shader/fragment">
precision mediump float;
uniform float time;
uniform float width;
uniform float height;
uniform float red;
uniform float green;
uniform float blue;
uniform float zoom;
uniform float rotation;
const float PI = 3.141592654;
void main () {
vec2 p0 = vec2(gl_FragCoord) * zoom;
float a = rotation * PI / 180.0;
vec2 p = vec2(p0.x * cos(a) - p0.y * sin(a),
p0.x * sin(a) + p0.y * cos(a));
vec3 c = vec3(red, green, blue);
vec3 color = (c *
sin(sin(time * 0.1) * 4.0 * PI * sin(p.x * .025)) *
sin(sin(time * 0.1) * 4.0 * PI * sin(p.y * .025) ));
gl_FragColor = vec4(vec3(color), 1.0);
}
</script>
<script id="vertexShader" type="x-shader/vertex">
precision mediump float;
attribute vec2 position;
void main () {
gl_Position = vec4(position, 0, 1);
}
</script>
<div class="ui"></div>
<script src='js/regl.js'></script>
<script src='js/react.production.min.js'></script>
<script src='js/react-dom.production.min.js'></script>
<script src="js/index.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
HTML5 Canvas马赛克背景缩放动画特效.zip
版权申诉
92 浏览量
2023-09-26
01:42:58
上传
评论
收藏 94KB ZIP 举报
HTML5 Canvas马赛克背景缩放动画特效.zip （6个子文件） 
js 
regl.js 271KB react-dom.production.min.js 92KB index.js 4KB react.production.min.js 10KB css style.css 157B
index.html 2KB资源评论
