沉浸式随机壁纸代码

分享文章作者: Ws01 创建时间: 2026-03-03 更新时间: 2026-03-03 📝 字数: 9,601 字 👁️ 阅读: 21 次

一、创建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 });
    }
  }
}

三、静态html代码，替换CF上搭建好的pc.txt和pe.txt链接地址

<!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>

四、CF上搭建worker，替换网址链接为二中准备好的链接

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    
    // 处理图片 API 请求
    if (url.pathname === '/api/image') {
      const type = url.searchParams.get('type') || 'pc';
      try {
        const res = await fetch(`https://网址链接/?type=${type}&t=${Date.now()}`);
        const imageUrl = await res.text();
        return new Response(imageUrl, {
          headers: {
            'Content-Type': 'text/plain',
            'Access-Control-Allow-Origin': '*'
          }
        });
      } catch (e) {
        return new Response('Error fetching image', { status: 500 });
      }
    }
    
    // 返回 HTML 页面
    const html = `<!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;
}

@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>
const workerUrl = "/api/image";

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>`;

    return new Response(html, {
      headers: {
        'Content-Type': 'text/html',
      },
    });
  },
};

留言

暂无留言

文章详情

沉浸式随机壁纸代码

留言