html实现网站更改鼠标样式特效、网站背景特效、网站右下角动态小人特效、当前时间等,要美丽、酷、有科技感,还要有白天黑夜模式切换,给我代码
时间: 2023-06-27 18:07:15 浏览: 51
以下是一个简单的 HTML 页面,包含了更改鼠标样式特效、网站背景特效、网站右下角动态小人特效以及当前时间的功能。代码如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<style>
/* 更改鼠标样式特效 */
body {
cursor: url('custom-cursor.png'), auto;
}
/* 网站背景特效 */
body {
background-image: url('background.jpg');
background-size: cover;
background-attachment: fixed;
}
/* 网站右下角动态小人特效 */
#floating-man {
position: fixed;
bottom: 0;
right: 0;
animation: float-man 3s ease-in-out infinite;
}
@keyframes float-man {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
/* 当前时间 */
.time {
position: fixed;
top: 0;
right: 0;
padding: 10px;
background-color: rgba(255, 255, 255, 0.5);
font-size: 24px;
font-weight: bold;
}
/* 白天黑夜模式切换 */
.dark-mode {
filter: invert(1) hue-rotate(180deg);
}
</style>
</head>
<body>
<div id="floating-man">
<img src="floating-man.gif" alt="Floating Man">
</div>
<div class="time"></div>
<script>
// 显示当前时间
function updateTime() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
const timeString = `${hours}:${minutes}:${seconds}`;
document.querySelector('.time').textContent = timeString;
}
setInterval(updateTime, 1000);
// 切换白天黑夜模式
const body = document.querySelector('body');
const darkModeButton = document.createElement('button');
darkModeButton.textContent = 'Dark Mode';
darkModeButton.addEventListener('click', () => {
body.classList.toggle('dark-mode');
});
document.body.appendChild(darkModeButton);
</script>
</body>
</html>
```
请将 `custom-cursor.png`、`background.jpg` 和 `floating-man.gif` 这三个文件放在与 HTML 文件相同的目录下,以便能够正确加载。