Minecraft 网站设计：鼠标互动动画和动态渐变色

<!DOCTYPE html>
<html>
<head>
<title>Minecraft 网站设计：鼠标互动动画和动态渐变色</title>
<style>
/* 添加一些基本的样式 */
body {
margin: 0;
padding: 0;
overflow: hidden;
}
<p>#container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right, #ff9a9e, #fad0c4);
}</p>
<p>h1 {
font-family: 'Arial', sans-serif;
font-size: 48px;
color: #fff;
text-shadow: 2px 2px #000;
animation: fadeIn 2s ease-in-out;
}</p>
<p>/* 添加动画效果 */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style></p>
</head>
<body>
<div id="container">
<h1>Welcome to Minecraft!</h1>
</div>
<script>
// 添加鼠标互动效果
const container = document.getElementById('container');
container.addEventListener('mousemove', (e) => {
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
container.style.background = `radial-gradient(circle, #ff9a9e, #fad0c4, rgba(0,0,0,0.8))`;
container.style.backgroundPosition = `${x * 100}% ${y * 100}%`;
});
</script>
</body>
</html>