一、创建pc.txt和pe.txt两个文件，分别存放电脑端和手机端的图片链接地址，上传到网盘。
https://picture.dpdns.org/1748880221421.webp
https://picture.dpdns.org/1748878414253.webp
https://picture.dpdns.org/1748880221421.webp
https://picture.dpdns.org/1748878414253.webp
二、在CF上Workers创建图片链接，替换两个txt链接地址
export default {
async fetch(request) {
const url = new URL(request.url);
const type = url.searchParams.get("type") || "pc";
const txtUrl = type === "pe"
? "https://网址/pe.txt"
: "https://网址/pc.txt";
try {
const response = await fetch(txtUrl);
const text = await response.text();
const images = text.trim()
.split("\n")
.map(i => i.trim())
.filter(i => i.length > 0);
if (images.length === 0) {
return new Response("No images", { status: 404 });
}
const random = images[Math.floor(Math.random() * images.length)];
return new Response(random, {
headers: {
"Content-Type": "text/plain",
"Access-Control-Allow-Origin": "*",
"Cache-Control": "no-cache"
}
});
} catch (err) {
return new Response("Error", { status: 500 });
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>沉浸式随机壁纸</title>
<style>
html, body {
margin: 0;
height: 100%;
background: #000;
overflow: hidden;
}
/ 粒子背景 /
canvas {
position: fixed;
top: 0;
left: 0;
z-index: 0;
}
/ 图片层 /
.wallpaper {
position: absolute;
width: 110%;
height: 110%;
object-fit: cover;
opacity: 0;
transition: opacity 1.2s ease-in-out;
z-index: 1;
}
.wallpaper.active {
opacity: 1;
}
/ Ken Burns 动画 /
@keyframes kenburns1 {
from { transform: scale(1) translate(0,0); }
to { transform: scale(1.15) translate(-3%, -3%); }
}
@keyframes kenburns2 {
from { transform: scale(1) translate(0,0); }
to { transform: scale(1.2) translate(3%, -2%); }
}
@keyframes kenburns3 {
from { transform: scale(1) translate(0,0); }
to { transform: scale(1.18) translate(-2%, 3%); }
}
</style>
</head>
<body>
<canvas id="bg"></canvas>
<img id="img1" class="wallpaper">
<img id="img2" class="wallpaper">
<script>
/* =============================
Worker 地址
============================= */
const workerUrl = "CF上搭建好的pc.txt和pe.txt链接地址";
/* =============================
Ken Burns + 图片逻辑
============================= */
let current = 0;
const imgs = [
document.getElementById("img1"),
document.getElementById("img2")
];
function isMobile() {
return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
}
async function getImageUrl() {
const type = isMobile() ? "pe" : "pc";
const res = await fetch(${workerUrl}?type=${type}&t=${Date.now()});
return await res.text();
}
function randomKenBurns(img) {
const effects = ["kenburns1", "kenburns2", "kenburns3"];
const chosen = effects[Math.floor(Math.random() * effects.length)];
img.style.animation = ${chosen} 10s ease-in-out forwards;
}
async function switchImage() {
try {
const url = await getImageUrl();
const next = 1 - current;
const img = imgs[next];
const preload = new Image();
preload.src = url;
preload.onload = () => {
img.src = url;
img.classList.add("active");
imgs[current].classList.remove("active");
img.style.animation = "none";
void img.offsetWidth;
randomKenBurns(img);
current = next;
};
preload.onerror = () => {
setTimeout(switchImage, 1000);
};
} catch {
setTimeout(switchImage, 1000);
}
}
switchImage();
setInterval(switchImage, 10000);
/* =============================
科技粒子背景
============================= */
const canvas = document.getElementById("bg");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particles = [];
for (let i = 0; i < 120; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: (Math.random() - 0.5) * 0.4,
vy: (Math.random() - 0.5) * 0.4,
size: Math.random() * 2
});
}
function animateParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "rgba(0,200,255,0.7)";
particles.forEach(p => {
p.x += p.vx;
p.y += p.vy;
if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fill();
});
requestAnimationFrame(animateParticles);
}
animateParticles();
window.onresize = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
</script>
</body>
</html>