- 最近迷上了cloudflare woker ，自己部署了一些小应用。但毕竟不是专业前端，想着找一些好看的HTML界面应用起来，便发此贴。想看看佬友们珍藏的那些HTML
3 个赞
你不说html我还以为你要找片
2 个赞
建议给出图
1 个赞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D黑洞效果</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { position: fixed; top: 0; left: 0; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
let scene, camera, renderer;
let blackHole, blackHoleSphere;
const blackHoleVertexShader = `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
const blackHoleFragmentShader = `
uniform float time;
uniform float aspect;
varying vec2 vUv;
float random(vec2 st) {
return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
}
float fractalNoise(vec2 st) {
float value = 0.0;
float amplitude = 0.5;
float frequency = 1.0;
for(int i = 0; i < 3; i++) {
value += amplitude * random(st * frequency + time);
frequency *= 2.0;
amplitude *= 0.5;
}
return value;
}
vec2 tunnelDistortion(vec2 uv, float time) {
float dist = length(uv);
float angle = atan(uv.y, uv.x);
float tunnelEffect = 0.3 / (dist + 0.5);
float twist = angle + time * 0.5;
float depthEffect = pow(dist, 0.5);
vec2 tunnelUv = vec2(
cos(twist) * depthEffect,
sin(twist) * depthEffect
);
return tunnelUv * tunnelEffect;
}
void main() {
vec2 uv = vUv * 2.0 - 1.0;
uv.x *= aspect;
float dist = length(uv);
float angle = atan(uv.y, uv.x);
vec2 tunnelUv = tunnelDistortion(uv, time);
float tunnelDist = length(tunnelUv);
float depth = 1.0 - smoothstep(0.0, 1.0, dist);
float zOffset = pow(depth, 2.0) * 0.1;
vec3 color = vec3(0.0);
if (dist < 0.25) {
gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
return;
}
else {
float glow = 0.05 / (abs(dist - 0.4) + 0.05);
float ring1 = sin(tunnelDist * 30.0 - time * 2.0) * 0.5 + 0.5;
float ring2 = sin(tunnelDist * 20.0 - time * 1.5 + angle * 2.0) * 0.5 + 0.5;
float ring3 = sin(tunnelDist * 15.0 - time + angle * 4.0) * 0.5 + 0.5;
float noise = fractalNoise(tunnelUv + vec2(time * 0.1));
float spiral = sin(angle * 8.0 + tunnelDist * 15.0 - time * 2.0) * 0.5 + 0.5;
vec3 baseColor = vec3(1.0, 0.3, 0.1) * glow * (2.0 + depth);
vec3 ringColor = vec3(1.0, 0.7, 0.3) * (ring1 + ring2 + ring3) * glow;
vec3 spiralColor = vec3(0.9, 0.5, 0.2) * spiral * glow;
vec3 noiseColor = vec3(1.0, 0.6, 0.2) * noise * glow;
float outerGlow = 0.04 / (abs(dist - 0.8) + 0.1);
vec3 glowColor = vec3(0.8, 0.3, 0.1) * outerGlow;
color = baseColor + ringColor * 0.6 + spiralColor * 0.8 + noiseColor * 0.4 + glowColor;
color *= (1.0 + depth * 0.5);
float pulse = sin(time * 1.5) * 0.5 + 0.5;
color *= 1.0 + pulse * 0.3;
color *= smoothstep(2.0, 0.5, dist);
}
color = pow(color, vec3(0.8));
color *= 1.8;
float fog = smoothstep(0.5, 2.0, dist);
color = mix(color, vec3(0.0), fog * 0.7);
gl_FragColor = vec4(color, 1.0);
}
`;
const sphereVertexShader = `
varying vec3 vNormal;
varying vec2 vUv;
void main() {
vNormal = normalize(normalMatrix * normal);
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
const sphereFragmentShader = `
uniform float time;
varying vec3 vNormal;
varying vec2 vUv;
void main() {
vec3 baseColor = vec3(0.0);
vec3 lightDir = normalize(vec3(sin(time), cos(time), 1.0));
float diff = max(dot(vNormal, lightDir), 0.0);
float fresnel = pow(1.0 - abs(dot(vNormal, vec3(0.0, 0.0, 1.0))), 2.0);
float pattern = sin(vUv.x * 20.0 + time * 2.0) * 0.5 + 0.5;
pattern *= sin(vUv.y * 20.0 + time * 2.0) * 0.5 + 0.5;
vec3 color = vec3(0.1, 0.0, 0.2);
color += vec3(0.8, 0.3, 0.1) * fresnel;
color += vec3(0.5, 0.2, 0.1) * pattern * 0.3;
color *= 0.8 + diff * 0.4;
gl_FragColor = vec4(color, 1.0);
}
`;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 2;
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
createBackground();
createBlackHoleSphere();
window.addEventListener('resize', onWindowResize, false);
animate();
}
function createBackground() {
const aspect = window.innerWidth / window.innerHeight;
const width = 4 * aspect;
const height = 4;
const geometry = new THREE.PlaneGeometry(width, height);
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
aspect: { value: aspect }
},
vertexShader: blackHoleVertexShader,
fragmentShader: blackHoleFragmentShader,
transparent: true
});
blackHole = new THREE.Mesh(geometry, material);
blackHole.position.z = -0.1;
scene.add(blackHole);
}
function createBlackHoleSphere() {
const geometry = new THREE.SphereGeometry(0.2, 64, 64);
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 }
},
vertexShader: sphereVertexShader,
fragmentShader: sphereFragmentShader,
transparent: true
});
blackHoleSphere = new THREE.Mesh(geometry, material);
scene.add(blackHoleSphere);
}
function onWindowResize() {
const aspect = window.innerWidth / window.innerHeight;
if (camera instanceof THREE.PerspectiveCamera) {
camera.aspect = aspect;
camera.updateProjectionMatrix();
}
const width = 4 * aspect;
const height = 4;
blackHole.geometry = new THREE.PlaneGeometry(width, height);
blackHole.material.uniforms.aspect.value = aspect;
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
blackHole.material.uniforms.time.value += 0.01;
blackHoleSphere.material.uniforms.time.value += 0.01;
blackHoleSphere.rotation.y += 0.02;
blackHoleSphere.rotation.x += 0.01;
renderer.render(scene, camera);
}
init();
</script>
</body>
</html>
1 个赞
动态的，模仿黑洞
1 个赞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D黑洞效果</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { position: fixed; top: 0; left: 0; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
let scene, camera, renderer;
let blackHole;
const blackHoleVertexShader = `
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
const blackHoleFragmentShader = `
uniform float time;
uniform float aspect;
varying vec2 vUv;
void main() {
vec2 uv = vUv * 2.0 - 1.0;
uv.x *= aspect;
float dist = length(uv);
float angle = atan(uv.y, uv.x);
float rotationSpeed = 1.0 - smoothstep(0.0, 1.6, dist);
angle += time * rotationSpeed * 2.0;
float distortion = 0.15 / (dist + 0.1);
vec2 rotatedUv = vec2(
cos(angle) * dist + distortion * cos(angle + time),
sin(angle) * dist + distortion * sin(angle + time)
);
vec3 color = vec3(0.0);
if (dist < 0.25) {
color = vec3(0.0);
}
else {
float glow = 0.04 / (abs(dist - 0.5) + 0.05);
color = vec3(1.0, 0.3, 0.1) * glow * 1.5;
float band = sin(angle * 8.0 + time * 3.0) * 0.5 + 0.5;
color += vec3(1.0, 0.5, 0.2) * band * glow * 0.8;
float outerGlow = 0.02 / (abs(dist - 0.7) + 0.1);
color += vec3(0.8, 0.3, 0.1) * outerGlow;
}
color *= 1.2;
gl_FragColor = vec4(color, 1.0);
}
`;
function init() {
scene = new THREE.Scene();
const aspect = window.innerWidth / window.innerHeight;
const frustumSize = 2;
camera = new THREE.OrthographicCamera(
-frustumSize * aspect,
frustumSize * aspect,
frustumSize,
-frustumSize,
0.1,
100
);
camera.position.z = 1;
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
createBlackHole();
window.addEventListener('resize', onWindowResize, false);
animate();
}
function createBlackHole() {
const aspect = window.innerWidth / window.innerHeight;
const width = 4 * aspect;
const height = 4;
const geometry = new THREE.PlaneGeometry(width, height);
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
aspect: { value: aspect }
},
vertexShader: blackHoleVertexShader,
fragmentShader: blackHoleFragmentShader,
transparent: true
});
blackHole = new THREE.Mesh(geometry, material);
scene.add(blackHole);
}
function onWindowResize() {
const aspect = window.innerWidth / window.innerHeight;
const frustumSize = 2;
camera.left = -frustumSize * aspect;
camera.right = frustumSize * aspect;
camera.top = frustumSize;
camera.bottom = -frustumSize;
camera.updateProjectionMatrix();
const width = 4 * aspect;
const height = 4;
blackHole.geometry = new THREE.PlaneGeometry(width, height);
blackHole.material.uniforms.aspect.value = aspect;
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
blackHole.material.uniforms.time.value += 0.01;
renderer.render(scene, camera);
}
init();
</script>
</body>
</html>
最近也是迷上了黑洞的特效。 
@Clarke.L 大鹅来点
2 个赞