新增: Bing壁纸历史导航+极光流体主题+重启菜单
This commit is contained in:
161
web/themes/fractal.html
Normal file
161
web/themes/fractal.html
Normal file
@@ -0,0 +1,161 @@
|
||||
<canvas id="c" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;"></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('c');
|
||||
var gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
|
||||
|
||||
var mouseX = 0, mouseY = 0, lastMove = 0;
|
||||
var clickX = 0, clickY = 0, clickTime = 0;
|
||||
|
||||
document.addEventListener('mousemove', function(e) {
|
||||
mouseX = e.clientX / window.innerWidth;
|
||||
mouseY = 1.0 - e.clientY / window.innerHeight;
|
||||
lastMove = performance.now();
|
||||
});
|
||||
document.addEventListener('click', function(e) {
|
||||
clickX = e.clientX / window.innerWidth;
|
||||
clickY = 1.0 - e.clientY / window.innerHeight;
|
||||
clickTime = performance.now();
|
||||
});
|
||||
|
||||
var vsSrc = 'attribute vec2 a_pos;void main(){gl_Position=vec4(a_pos,0.0,1.0);}';
|
||||
var fsSrc = `
|
||||
precision highp float;
|
||||
uniform float u_time;
|
||||
uniform vec2 u_resolution;
|
||||
uniform vec2 u_mouse;
|
||||
uniform float u_click;
|
||||
uniform vec2 u_clickPos;
|
||||
|
||||
vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}
|
||||
vec2 mod289(vec2 x){return x-floor(x*(1.0/289.0))*289.0;}
|
||||
vec3 permute(vec3 x){return mod289(((x*34.0)+1.0)*x);}
|
||||
|
||||
float snoise(vec2 v){
|
||||
const vec4 C=vec4(0.211324865405187,0.366025403784439,-0.577350269189626,0.024390243902439);
|
||||
vec2 i=floor(v+dot(v,C.yy));
|
||||
vec2 x0=v-i+dot(i,C.xx);
|
||||
vec2 i1=(x0.x>x0.y)?vec2(1.0,0.0):vec2(0.0,1.0);
|
||||
vec4 x12=x0.xyxy+C.xxzz;
|
||||
x12.xy-=i1;
|
||||
i=mod289(i);
|
||||
vec3 p=permute(permute(i.y+vec3(0.0,i1.y,1.0))+i.x+vec3(0.0,i1.x,1.0));
|
||||
vec3 m=max(0.5-vec3(dot(x0,x0),dot(x12.xy,x12.xy),dot(x12.zw,x12.zw)),0.0);
|
||||
m=m*m;m=m*m;
|
||||
vec3 x=2.0*fract(p*C.www)-1.0;
|
||||
vec3 h=abs(x)-0.5;
|
||||
vec3 ox=floor(x+0.5);
|
||||
vec3 a0=x-ox;
|
||||
m*=1.79284291400159-0.85373472095314*(a0*a0+h*h);
|
||||
vec3 g;
|
||||
g.x=a0.x*x0.x+h.x*x0.y;
|
||||
g.yz=a0.yz*x12.xz+h.yz*x12.yw;
|
||||
return 130.0*dot(m,g);
|
||||
}
|
||||
|
||||
void main(){
|
||||
vec2 uv=gl_FragCoord.xy/u_resolution;
|
||||
vec2 p=uv*2.0-1.0;
|
||||
p.x*=u_resolution.x/u_resolution.y;
|
||||
float t=u_time*0.3;
|
||||
|
||||
vec2 mp=u_mouse*2.0-1.0;
|
||||
mp.x*=u_resolution.x/u_resolution.y;
|
||||
float mouseDist=length(p-mp);
|
||||
float mouseInfluence=smoothstep(0.8,0.0,mouseDist)*0.3;
|
||||
|
||||
float ripple=0.0;
|
||||
if(u_click>0.0){
|
||||
vec2 cp=u_clickPos*2.0-1.0;
|
||||
cp.x*=u_resolution.x/u_resolution.y;
|
||||
float d=length(p-cp);
|
||||
ripple=sin(d*30.0-u_click*8.0)*exp(-d*3.0)*exp(-u_click*2.0)*0.15;
|
||||
}
|
||||
|
||||
float n1=snoise(p*1.5+vec2(t*0.5,t*0.3))*0.5+0.5;
|
||||
float n2=snoise(p*3.0+vec2(-t*0.7,t*0.5))*0.5+0.5;
|
||||
float n3=snoise(p*0.8+vec2(t*0.2,-t*0.4)+mouseInfluence)*0.5+0.5;
|
||||
|
||||
vec3 c1=vec3(0.05,0.2,0.4);
|
||||
vec3 c2=vec3(0.0,0.8,0.5);
|
||||
vec3 c3=vec3(0.3,0.1,0.6);
|
||||
vec3 c4=vec3(0.1,0.5,0.9);
|
||||
|
||||
float aurora=smoothstep(0.3,0.7,n3)*smoothstep(0.8,0.4,n1);
|
||||
vec3 auroraColor=mix(c2,c4,n2)*aurora*1.2;
|
||||
vec3 bg=mix(c1,c3,uv.y*0.5+n1*0.3);
|
||||
bg+=auroraColor;
|
||||
|
||||
float stars=pow(snoise(p*20.0),12.0)*0.8;
|
||||
bg+=vec3(stars);
|
||||
bg+=vec3(ripple*2.0,ripple*3.0,ripple*4.0);
|
||||
bg+=vec3(0.1,0.3,0.5)*mouseInfluence;
|
||||
|
||||
float vignette=1.0-smoothstep(0.5,1.5,length(p*0.7));
|
||||
bg*=vignette*0.9+0.1;
|
||||
|
||||
gl_FragColor=vec4(bg,1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
function mkShader(type,src){
|
||||
var s=gl.createShader(type);
|
||||
gl.shaderSource(s,src);
|
||||
gl.compileShader(s);
|
||||
if(!gl.getShaderParameter(s,gl.COMPILE_STATUS)){gl.deleteShader(s);return null;}
|
||||
return s;
|
||||
}
|
||||
|
||||
var vs=mkShader(gl.VERTEX_SHADER,vsSrc);
|
||||
var fs=mkShader(gl.FRAGMENT_SHADER,fsSrc);
|
||||
var prog=gl.createProgram();
|
||||
gl.attachShader(prog,vs);
|
||||
gl.attachShader(prog,fs);
|
||||
gl.linkProgram(prog);
|
||||
gl.useProgram(prog);
|
||||
|
||||
var buf=gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER,buf);
|
||||
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),gl.STATIC_DRAW);
|
||||
var aPos=gl.getAttribLocation(prog,'a_pos');
|
||||
gl.enableVertexAttribArray(aPos);
|
||||
gl.vertexAttribPointer(aPos,2,gl.FLOAT,false,0,0);
|
||||
|
||||
var uTime=gl.getUniformLocation(prog,'u_time');
|
||||
var uRes=gl.getUniformLocation(prog,'u_resolution');
|
||||
var uMouse=gl.getUniformLocation(prog,'u_mouse');
|
||||
var uClick=gl.getUniformLocation(prog,'u_click');
|
||||
var uClickPos=gl.getUniformLocation(prog,'u_clickPos');
|
||||
|
||||
function resize(){
|
||||
var dpr=window.devicePixelRatio||1;
|
||||
canvas.width=window.innerWidth*dpr;
|
||||
canvas.height=window.innerHeight*dpr;
|
||||
gl.viewport(0,0,canvas.width,canvas.height);
|
||||
}
|
||||
window.addEventListener('resize',resize);
|
||||
resize();
|
||||
|
||||
var lastFrame=0, targetFPS=30;
|
||||
|
||||
function render(now){
|
||||
requestAnimationFrame(render);
|
||||
if(window._paused||window._fullscreen)return;
|
||||
|
||||
var interval=1000/targetFPS;
|
||||
if(now-lastFrame<interval)return;
|
||||
lastFrame=now;
|
||||
|
||||
if(now-lastMove>5000){targetFPS=10;}else{targetFPS=30;}
|
||||
|
||||
var t=now/1000.0;
|
||||
var clickElapsed=clickTime>0?(now-clickTime)/1000.0:0.0;
|
||||
|
||||
gl.uniform1f(uTime,t);
|
||||
gl.uniform2f(uRes,canvas.width,canvas.height);
|
||||
gl.uniform2f(uMouse,mouseX,mouseY);
|
||||
gl.uniform1f(uClick,clickElapsed>3.0?0.0:clickElapsed);
|
||||
gl.uniform2f(uClickPos,clickX,clickY);
|
||||
gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
|
||||
}
|
||||
requestAnimationFrame(render);
|
||||
</script>
|
||||
37
web/themes/text.html
Normal file
37
web/themes/text.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<style>
|
||||
@keyframes textGlow {
|
||||
0%, 100% { text-shadow: 0 0 40px rgba(120,140,255,0.3), 0 0 80px rgba(120,140,255,0.1); }
|
||||
50% { text-shadow: 0 0 60px rgba(120,140,255,0.5), 0 0 120px rgba(120,140,255,0.2); }
|
||||
}
|
||||
@keyframes textFloat {
|
||||
0%, 100% { transform: translate(-50%, -50%) translateY(0px); }
|
||||
50% { transform: translate(-50%, -50%) translateY(-8px); }
|
||||
}
|
||||
#wallpaper-text {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
|
||||
font-size: 120px;
|
||||
font-weight: 200;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
letter-spacing: 8px;
|
||||
white-space: nowrap;
|
||||
animation: textGlow 4s ease-in-out infinite, textFloat 6s ease-in-out infinite;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
<div id="wallpaper-text"></div>
|
||||
<script>
|
||||
var el = document.getElementById('wallpaper-text');
|
||||
if (el) {
|
||||
var text = 'DREAM';
|
||||
if (window.wallpaperText) text = window.wallpaperText;
|
||||
el.textContent = text;
|
||||
var len = text.length;
|
||||
var size = Math.min(120, Math.floor(window.innerWidth * 0.8 / len));
|
||||
el.style.fontSize = size + 'px';
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user