MC官网：带鼠标交互动画和动态渐变色的UI设计
<!DOCTYPE html>
<html>
<head>
<title>MC 官网介绍 - 带有鼠标交互动画和动态渐变色的UI设计</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<nav>
<div class="logo">MC</div>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">特性</a></li>
<li><a href="#">下载</a></li>
<li><a href="#">社区</a></li>
</ul>
</nav>
<header>
<h1>欢迎来到 MC</h1>
<p>一个令人兴奋的游戏世界等待着您的探索</p>
</header>
<section>
<h2>我们的特性</h2>
<p>这里展示MC的特性介绍</p>
</section>
<footer>
<p>© 2022 MC. All rights reserved.</p>
</footer>
<script src="main.js"></script>
</body>
</html>
<p>/* 导航栏样式 */
nav {
background: transparent;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
nav .logo {
color: #fff;
font-size: 24px;
font-weight: bold;
padding: 20px;
}
nav ul.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
}
nav ul.menu li {
margin-right: 20px;
}
nav ul.menu li a {
color: #fff;
text-decoration: none;
padding: 10px;
transition: color 0.3s;
}
nav ul.menu li a:hover {
color: #ffcc00;
}</p>
<p>/* 页面内容样式 */
header {
height: 500px;
background-image: url('header-bg.jpg');
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
}
header h1 {
font-size: 48px;
margin-bottom: 20px;
}
header p {
font-size: 24px;
}</p>
<p>section {
padding: 50px;
background-color: #f2f2f2;
text-align: center;
}
section h2 {
font-size: 36px;
margin-bottom: 20px;
}</p>
<p>footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}</p>
<p>/* 动画效果 */
header h1,
header p,
section h2,
section p {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.5s, transform 0.5s;
}
header.show h1,
header.show p,
section.show h2,
section.show p {
opacity: 1;
transform: translateY(0);
}</p>
<p>// 监听页面滚动事件，控制动画效果的触发时机
window.addEventListener('scroll', function() {
var header = document.querySelector('header');
var section = document.querySelector('section');</p>
<p>var headerHeight = header.offsetHeight;
var sectionHeight = section.offsetHeight;</p>
<p>var scrollPosition = window.pageYOffset;</p>
<p>if (scrollPosition > headerHeight - window.innerHeight + 200) {
header.classList.add('show');
}</p>
<p>if (scrollPosition > headerHeight + sectionHeight - window.innerHeight + 200) {
section.classList.add('show');
}
});</p>
原文地址: https://www.cveoy.top/t/topic/p5am 著作权归作者所有。请勿转载和采集!