Minecraft官网：带鼠标互动动画和动态渐变色的UI设计
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Minecraft 官网</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Minecraft 官网</h1>
</header>
<main>
<section id="introduction">
<h2>欢迎来到 Minecraft</h2>
<p>这是一个创造和冒险的世界，您可以在其中建造自己的梦想。</p>
</section>
<pre><code><section id="gameplay">
<h2>游戏玩法</h2>
<p>在 Minecraft 中，您可以挖掘资源、制作工具、与其他玩家合作或竞争。</p>
</section>
<section id="community">
<h2>社区</h2>
<p>加入我们的社区，与其他玩家分享您的创意和建筑。</p>
</section>
</code></pre>
</main>
<footer>
<p>版权所有 © 2022 Minecraft</p>
</footer>
<script src="script.js"></script>
</body>
</html>
<p>/* CSS代码 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}</p>
<p>header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}</p>
<p>main {
padding: 20px;
}</p>
<p>section {
margin-bottom: 50px;
}</p>
<p>h2 {
color: #333;
}</p>
<p>p {
color: #666;
}</p>
<p>footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}</p>
<p>/* 鼠标互动效果 */
#introduction {
transition: background-color 0.5s ease;
}</p>
<p>#introduction:hover {
background-color: #f1f1f1;
}</p>
<p>#gameplay {
transition: transform 0.5s ease;
}</p>
<p>#gameplay:hover {
transform: rotate(360deg);
}</p>
<p>#community {
transition: color 0.5s ease;
}</p>
<p>#community:hover {
color: #ff0000;
}</p>
<p>/* JavaScript代码 */
window.addEventListener('mousemove', function(event) {
var x = event.clientX / window.innerWidth;
var y = event.clientY / window.innerHeight;</p>
<p>document.body.style.backgroundColor = 'rgb(' + Math.round(x * 255) + ',' + Math.round(y * 255) + ',100)';
});</p>
原文地址: https://www.cveoy.top/t/topic/p5ah 著作权归作者所有。请勿转载和采集!