|
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>自动轮换壁纸</title>
- <style>
- body, html {
- margin: 0;
- padding: 0;
- height: 100%;
- overflow: hidden;
- background: url('https://bbs.cnzv.cc/up/upload/pic/12/20241231-fde63210eb7ed8c519618a77501040f9.jpg') no-repeat center center fixed; /* 添加固定背景图 */
- background-size: cover;
- }
- #wallpaper {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-size: cover;
- background-position: center;
- transition: background-image 1s ease-in-out; /* 基础转场效果 */
- }
- /* 定义不同的转场效果 */
- .fade {
- animation: fadeEffect 1s forwards;
- }
- @keyframes fadeEffect {
- from { opacity: 0; }
- to { opacity: 1; }
- }
- .slide-left {
- animation: slideLeftEffect 1s forwards;
- }
- @keyframes slideLeftEffect {
- from { transform: translateX(100%); }
- to { transform: translateX(0); }
- }
- .slide-right {
- animation: slideRightEffect 1s forwards;
- }
- @keyframes slideRightEffect {
- from { transform: translateX(-100%); }
- to { transform: translateX(0); }
- }
- </style>
- </head>
- <body>
- <div id="wallpaper"></div>
- <script>
- const wallpaper = document.getElementById('wallpaper');
- const images = [
- 'url(https://bbs.cnzv.cc/up/upload/pic/12/20250105-7b6a3f5fce7c4775b1b6d438bae02506.jpg)',
- 'url(https://bbs.cnzv.cc/up/upload/pic/12/20250105-8fd27817ac06e6d9d21d59664c319da8.jpg)',
- 'url(https://bbs.cnzv.cc/up/upload/pic/12/20241231-3c3eb86df10d6071f90b9fe6ae6fd26a.jpg)',
- // 添加更多图片路径
- ];
- let currentIndex = 0;
- const effects = ['fade', 'slide-left', 'slide-right']; // 转场效果列表
- function changeWallpaper() {
- currentIndex = (currentIndex + 1) % images.length;
- const effect = effects[Math.floor(Math.random() * effects.length)]; // 随机选择一个转场效果
- wallpaper.classList.remove(...effects); // 移除所有可能的类名
- wallpaper.classList.add(effect); // 添加新的转场效果类名
- wallpaper.style.backgroundImage = images[currentIndex];
- }
- setInterval(changeWallpaper, 5000); // 每5秒切换一次壁纸
- </script>
- </body>
- </html>
复制代码
|
|