小姐姐黑丝照片粒子效果随机播放
先创建一个script.js文件 代码如下
let imageUrl = 'https://api.suyanw.cn/api/hs.php';
let imageElement = document.getElementById('imageDisplay');
function fetchImage() {
fetch(imageUrl)
.then(response => response.blob())
.then(imageBlob => {
const imageObjectURL = URL.createObjectURL(imageBlob);
imageElement.src = imageObjectURL;
})
.catch(error => console.error('获取图片时出错:', error));
}
// 初始获取图片
fetchImage();
// 每3秒切换一次图片
setInterval(fetchImage, 3000);
imageElement.addEventListener('click', () => {
window.location.href = 'http://blog.jhwsy.cn/';
});
// 动态科幻粒子背景
particlesJS('particleCanvas', {
particles: {
number: {
value: 100,
density: {
enable: true,
value_area: 800
}
},
color: {
value: '#ffffff'
},
shape: {
type: 'circle',
stroke: {
width: 0,
color: '#000000'
},
polygon: {
nb_sides: 5
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 3,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: '#ffffff',
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 6,
direction: 'none',
random: false,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: true,
mode: 'repulse'
},
onclick: {
enable: true,
mode: 'push'
},
resize: true
},
modes: {
grab: {
distance: 400,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true
});
再创建一个index.HTML文件
代码如下
<!DOCTYPE html>
<html lang="zh">
<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;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: #000;
font-family: Arial, sans-serif;
}
#particleCanvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
img {
max-width: 80%;
max-height: 80%;
cursor: pointer;
border: 5px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<canvas id="particleCanvas"></canvas>
<img id="imageDisplay" alt="HS Image">
<script src="script.js"></script>
<script src="particles.js"></script>
</body>
</html>
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。