MC官网：带有鼠标互动动画效果和动态渐变色的精美设计
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>MC官网 - 充满活力的互动体验</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
}
<pre><code>#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#header li {
float: left;
}
#header li a {
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#header li a:hover {
background-color: rgba(255, 255, 255, 0.2);
}
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#content h1 {
font-size: 48px;
}
#content p {
font-size: 24px;
}
</code></pre>
</style>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const header = document.getElementById('header');
const content = document.getElementById('content');
<pre><code> header.addEventListener('mousemove', (event) => {
const x = Math.floor((event.clientX / window.innerWidth) * 255);
const y = Math.floor((event.clientY / window.innerHeight) * 255);
header.style.backgroundColor = `rgba(${x}, ${y}, 0, 0.5)`;
});
content.addEventListener('mousemove', (event) => {
const x = Math.floor((event.clientX / window.innerWidth) * 255);
const y = Math.floor((event.clientY / window.innerHeight) * 255);
content.style.backgroundColor = `rgba(${x}, ${y}, 0, 0.5)`;
});
});
</code></pre>
</script>
</head>
<body>
<div id='header'>
<ul>
<li><a href='#'>首页</a></li>
<li><a href='#'>产品</a></li>
<li><a href='#'>关于</a></li>
<li><a href='#'>联系我们</a></li>
</ul>
</div>
<div id='content'>
<div>
<h1>Welcome to MC!</h1>
<p>这是一段介绍MC的文本。</p>
</div>
</div>
</body>
</html>
<p>这段代码使用JavaScript监听鼠标移动事件，根据鼠标位置改变了导航栏和内容区域的背景颜色，实现了动态渐变色效果。导航栏使用了透明度为0.5的背景色，并在鼠标悬停时改变背景色。内容区域居中显示了一个标题和一段介绍文本。</p>
<p>你可以将上面的代码保存成一个HTML文件，用浏览器打开，即可看到效果。希望对你有帮助！</p>
原文地址: https://www.cveoy.top/t/topic/p5ak 著作权归作者所有。请勿转载和采集!