定义好一个图片url地址字典随机请求罢了,免了做后端接口,本篇只是为了方便以后copy记录一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KazeFrame</title>
<link rel="icon" href="https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/icon/angeldog/angeldog_32.ico"
type="image/icon">
</head>
<body>
<h1>KazeFrame</h1>
</body>
</html>
<style>
html,
body {
height: 100%;
width: 100vw;
margin: 0;
padding: 0;
font-size: 50px;
color: white;
cursor: default;
background-repeat: no-repeat;
text-shadow:
0px 0px 20px rgb(80, 120, 160),
0px 0px 40px rgb(160, 200, 240),
0px 0px 60px rgb(193, 180, 240);
display: flex;
justify-content: center;
align-items: center;
background-position: center;
background-size: cover;
}
@media (max-width:768px) {
html,
body {
font-size: 24px;
}
}
</style>
<script>
var imageUrls = [
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/001.webp",
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/002.webp",
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/003.webp",
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/004.webp",
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/005.webp",
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/006.webp",
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/007.webp",
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/008.webp",
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/009.webp",
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/010.webp",
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/011.webp",
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/012.webp",
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/013.webp",
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/050.webp",
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/051.webp",
"https://testingcf.jsdelivr.net/gh/4444TENSEI/CDN@master/img/background/yoru/052.webp",
];
function getRandomImage() {
var randomIndex = Math.floor(Math.random() * imageUrls.length);
var randomImageUrl = imageUrls[randomIndex];
document.body.style.backgroundImage = "url('" + randomImageUrl + "')";
}
window.onload = getRandomImage;
</script>