请扮演一个前端程序员兼顶级ui设计师帮我写一个带有鼠标互动的动画效果及部分动态渐变色的介绍MC的网页
作为一名前端程序员兼顶级UI设计师，我很高兴能够帮你创建一个带有鼠标互动的动画效果和动态渐变色的介绍MC（Minecraft）的网页。下面是一个简单的示例：
首先，我们需要创建一个HTML文件，命名为index.html，并在文件中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>介绍MC的网页</title>
<style>
/* 添加一些基本的样式 */
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to right, #ff9a9e, #fad0c4);
}
h1 {
font-family: 'Arial', sans-serif;
font-size: 48px;
color: #fff;
text-shadow: 2px 2px #000;
animation: fadeIn 2s ease-in-out;
}
/* 添加动画效果 */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</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>
上述代码中，我们首先添加了一些基本的样式，包括设置body的margin和padding为0，overflow为hidden，以及设置一个用于显示内容的容器div（id为"container"）。我们还为容器添加了一个渐变背景色。
接下来，我们使用CSS的@keyframes规则定义了一个fadeIn动画效果，它将使h1元素在2秒内逐渐显示出来。
在JavaScript部分，我们为容器添加了一个鼠标移动事件监听器。当鼠标移动时，我们通过计算鼠标在窗口内的位置，将渐变背景色应用到容器上，并设置背景位置随着鼠标移动而变化。
你可以将上述代码保存为index.html文件，并在浏览器中打开以查看效果。当你在网页中移动鼠标时，你会看到背景颜色发生渐变，并且标题文字会逐渐显示出来。
当然，这只是一个简单的示例。作为一名顶级UI设计师，你可以根据自己的创意和需求，进一步优化和定制这个动画效果，添加更多的交互和动态效果，使其更加炫目和吸引人。祝你设计成功
原文地址: https://www.cveoy.top/t/topic/incj 著作权归作者所有。请勿转载和采集!