<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>紫华云慧 - 官网（优化版）</title>
<style>
/* 全局重置 */
* {
margin
: 0;
padding
: 0;
box-sizing
: border-box;
font-family
: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html,
body {
height
: 100%;
overflow
: hidden;
/* 防止默认滚动 */
}
/* 页眉样式 */
.header {
position
: fixed;
top
: 0;
left
: 0;
width
: 100%;
height
: 70px;
background
: rgba(0, 0, 0, 0.7);
color
: white;
display: flex;
align-items
: center;
justify-content
: space-
between;
padding
: 0 30px;
z-index
: 25;
backdrop-filter
: blur(10px);
border-bottom
: 1px solid rgba(255, 255, 255, 0.1);
}
.logo {
font-size
: 1.8rem;
font-weight
: bold;
color
: #9370db;
}
.nav-links {
display: flex;
gap
: 30px;
}
.nav-links a {
color
: white;
text-decoration
: none;
font-weight
: 500;
transition
: color 0.3s;
}
.nav-links a
:hover {
color
: #9370db;
}
/* 主屏幕区域样式 */
.main-screen {
position
: fixed;
top
: 0;
left
: 0;
width
: 100%;
height
: 100%;
background
: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
display: flex;
flex-direction
: column;
justify-content
: center;
align-items
: center;
color
: white;
text-align
: center;
z-index
: 10;
padding-top
: 70px;
}
.main-title {
font-size
: 4rem;
margin-bottom
: 1rem;
text-shadow
: 2px 2px 10px rgba(0, 0, 0, 0.3);
}
.main-subtitle {
font-size
: 1.5rem;
margin-bottom
: 2rem;
}
/* 覆盖层样式 */
.cover-container {
position
: fixed;
bottom
: 0;
left
: 0;
width
: 100%;
height
: 0;
z-index
: 15;
overflow
: hidden;
transition
: height 0.5s cubic-bezier(0.33, 1, 0.68, 1);
/* 优化过渡曲线 */
will-change
: height;
/* 提示浏览器优化 */
}
/* 内容块容器 */
.content-blocks {
width
: 100%;
display: flex;
flex-direction
: column;
}
/* 内容块通用样式 */
.content-block {
width
: 100%;
min-height
: 100vh;
display: flex;
flex-direction
: column;
justify-content
: center;
align-items
: center;
padding
: 80px 10%;
color
: white;
}
/* 四个内容块的不同背景色 */
.block-1 {
background
: linear-gradient(135deg, #1a2a6c, #2c3e50);
}
.block-2 {
background
: linear-gradient(135deg, #8a2be2, #6a11cb);
}
.block-3 {
background
: linear-gradient(135deg, #b21f1f, #8B0000);
}
.block-4 {
background
: linear-gradient(135deg, #0d5c63, #44a08d);
}
.block-title {
font-size
: 2.8rem;
margin-bottom
: 1.5rem;
font-weight
: 700;
text-align
: center;
}
.block-content {
font-size
: 1.2rem;
line-height
: 1.8;
max-width
: 800px;
text-align
: center;
margin-bottom
: 2rem;
}
.features-grid {
display: grid;
grid-template-columns
: repeat(auto-fit, minmax(250px, 1fr));
gap
: 25px;
margin-top
: 40px;
width
: 100%;
max-width
: 1000px;
}
.feature-card {
background
: rgba(255, 255, 255, 0.1);
padding
: 25px;
border-radius
: 10px;
text-align
: center;
backdrop-filter
: blur(10px);
border
: 1px solid rgba(255, 255, 255, 0.1);
transform
: translateZ(0);
/* 启用GPU加速 */
}
.feature-icon {
font-size
: 2.5rem;
margin-bottom
: 15px;
}
.feature-title {
font-size
: 1.4rem;
margin-bottom
: 15px;
}
/* 右侧导航栏样式 */
.side-nav {
position
: fixed;
right
: 30px;
top
: 50%;
transform
: translateY(-50%);
background
: rgba(255, 255, 255, 0.1);
backdrop-filter
: blur(10px);
border-radius
: 20px;
padding
: 15px 10px;
z-index
: 20;
opacity
: 0;
visibility: hidden;
transition
: opacity 0.5s ease,
visibility 0.5s ease;
}
.side-nav.visible {
opacity
: 1;
visibility: visible;
}
.side-nav ul {
list-style
: none;
}
.side-nav li {
margin
: 15px 0;
text-align
: center;
}
.side-nav a {
color
: white;
text-decoration
: none;
font-size
: 1.2rem;
display: block;
padding
: 10px;
border-radius
: 15px;
transition
: background 0.3s;
}
.side-nav a
:hover {
background
: rgba(255, 255, 255, 0.2);
}
/* 响应式设计 */
@media (max-width
: 768px) {
.main-title {
font-size
: 2.5rem;
}
.main-subtitle {
font-size
: 1.2rem;
}
.block-title {
font-size
: 2.2rem;
}
.block-content {
font-size
: 1.1rem;
}
.features-grid {
grid-template-columns
: 1fr;
}
.nav-links {
display: none;
}
.side-nav {
display: none;
}
}
/* 滚动提示 */
.scroll-hint {
position
: fixed;
bottom
: 20px;
left
: 50%;
transform
: translateX(-50%);
color
: white;
background
: rgba(0, 0, 0, 0.5);
padding
: 10px 20px;
border-radius
: 20px;
z-index
: 20;
animation
: pulse 2s infinite;
display: none;
}
@keyframes pulse {
0% { opacity
: 0.7; }
50% { opacity
: 1; }
100% { opacity
: 0.7; }
}
</style>
</head>
<body>
<!-- 页眉 -->
<header class="header">
<div class="logo">紫华云慧</div>
<nav class="nav-links">
<a href="#block-1">首页</a>
<a href="#block-2">服务</a>
<a href="#block-3">案例</a>
<a href="#block-4">联系</a>
</nav>
</header>
<!-- 主页面 -->
<div class="main-screen">
<h1 class="main-title">紫华云慧</h1>
<p class="main-subtitle">创新科技，智慧未来</p>
</div>
<!-- 覆盖层 -->
<div class="cover-container" id="coverContainer">
<div class="content-blocks">
<!-- 内容块1 -->
<section class="content-block block-1" id="block-1">
<h2 class="block-title">关于我们</h2>
<p class="block-content">紫华云慧是一家专注于人工智能和大数据技术的创新企业，致力于为各行业提供智能化解决方案。</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🚀</div>
<h3 class="feature-title">技术创新</h3>
<p>专注于前沿技术研发，引领行业创新</p>
</div>
<div class="feature-card">
<div class="feature-icon">🤝</div>
<h3 class="feature-title">客户至上</h3>
<p>以客户需求为中心，提供定制化解决方案</p>
</div>
<div class="feature-card">
<div class="feature-icon">🌐</div>
<h3 class="feature-title">全球视野</h3>
<p>立足本土，面向全球，拥抱数字化转型</p>
</div>
</div>
</section>
<!-- 内容块2 -->
<section class="content-block block-2" id="block-2">
<h2 class="block-title">我们的服务</h2>
<p class="block-content">我们提供全方位的数字化解决方案，助力企业实现智能化转型。</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🤖</div>
<h3 class="feature-title">AI解决方案</h3>
<p>为企业提供定制化人工智能应用</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3 class="feature-title">数据分析</h3>
<p>深度挖掘数据价值，驱动业务增长</p>
</div>
<div class="feature-card">
<div class="feature-icon">☁️</div>
<h3 class="feature-title">云服务</h3>
<p>安全可靠的云端部署与管理</p>
</div>
</div>
</section>
<!-- 内容块3 -->
<section class="content-block block-3" id="block-3">
<h2 class="block-title">成功案例</h2>
<p class="block-content">我们已为多家知名企业提供数字化转型服务，取得了显著成果。</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🏦</div>
<h3 class="feature-title">金融行业</h3>
<p>为银行提供智能风控和客户服务解决方案</p>
</div>
<div class="feature-card">
<div class="feature-icon">🏥</div>
<h3 class="feature-title">医疗健康</h3>
<p>助力医院实现智能化诊断和管理</p>
</div>
<div class="feature-card">
<div class="feature-icon">🏭</div>
<h3 class="feature-title">智能制造</h3>
<p>为制造企业提供工业4.0转型方案</p>
</div>
</div>
</section>
<!-- 内容块4 -->
<section class="content-block block-4" id="block-4">
<h2 class="block-title">联系我们</h2>
<p class="block-content">欢迎与我们联系，探讨合作机会。</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">📞</div>
<h3 class="feature-title">电话咨询</h3>
<p>400-123-4567</p>
</div>
<div class="feature-card">
<div class="feature-icon">✉️</div>
<h3 class="feature-title">邮件联系</h3>
<p>info@zihuayunhui.com</p>
</div>
<div class="feature-card">
<div class="feature-icon">🏢</div>
<h3 class="feature-title">公司地址</h3>
<p>北京市海淀区科技园区88号</p>
</div>
</div>
</section>
</div>
</div>
<!-- 右侧导航栏 -->
<nav class="side-nav" id="sideNav">
<ul>
<li><a href="#block-1">关于</a></li>
<li><a href="#block-2">服务</a></li>
<li><a href="#block-3">案例</a></li>
<li><a href="#block-4">联系</a></li>
</ul>
</nav>
<div class="scroll-hint" id="scrollHint">使用鼠标滚轮向下滚动</div>
<script>
// 性能优化版本
(function() {
// 获取DOM元素
const coverContainer = document.getElementById('coverContainer');
const scrollHint = document.getElementById('scrollHint');
const sideNav = document.getElementById('sideNav');
// 缓存窗口高度
const windowHeight = window.innerHeight;
let totalConten
tHeight = 0;
// 计算内容总高度
const contentBlocks = document.querySelectorAll('.content-block');
contentBlocks.forEach(block => {
totalConten
tHeight += block.offse
tHeight;
});
// 初始设置
let coverHeight = 0;
let targe
tHeight = 0;
let lastScrollTime = 0;
let isAnimating = false;
let animationId = null;
let scrollDelta = 0;
// 显示滚动提示
setTimeout(() => {
scrollHint.style.
display = 'block';
setTimeout(() => {
scrollHint.style.
display = '
none';
}, 3000);
}, 2000);
// 使用requestAnimationFrame进行节流处理滚动事件
let ticking = false;
// 监听鼠标滚轮事件 - 使用被动事件提高性能
window.addEventListener('wheel', h
andleWheel, { passive
: false });
// 监听触摸事件（移动设备支持）
let touchStartY = 0;
window.addEventListener('touchstart', function(e) {
touchStartY = e.touches[0].clientY;
}, { passive
: true });
window.addEventListener('touchmove', function(e) {
const touchY = e.touches[0].clientY;
const deltaY = touchStartY - touchY;
// 累积滚动量
scrollDelta += deltaY * 2;
if (!ticking) {
requestAnimationFrame(() => {
h
andleScroll(scrollDelta);
scrollDelta = 0;
ticking = false;
});
ticking = true;
}
touchStartY = touchY;
e.preventDefault();
}, { passive
: false });
// 处理鼠标滚轮事件
function h
andleWheel(e) {
// 防止默认滚动行为
e.preventDefault();
// 获取滚动方向和距离
const delta = e.deltaY;
// 累积滚动量
scrollDelta += delta;
// 使用requestAnimationFrame进行节流
if (!ticking) {
requestAnimationFrame(() => {
h
andleScroll(scrollDelta);
scrollDelta = 0;
ticking = false;
});
ticking = true;
}
}
// 处理滚动的核心函数
function h
andleScroll(delta) {
// 根据滚动距离调整目标高度
targe
tHeight += delta * 0.8;
// 限制目标高度范围
targe
tHeight = Math.max(0, Math.min(targe
tHeight, totalConten
tHeight));
// 控制右侧导航栏的显示
if (targe
tHeight > windowHeight * 0.3) {
sideNav.classList.add('visible');
} else {
sideNav.classList.remove('visible');
}
// 如果不在动画中，启动动画
if (!isAnimating) {
isAnimating = true;
animateCover();
}
}
// 使用requestAnimationFrame实现平滑动画
function animateCover() {
// 计算缓动效果 - 使用更平滑的缓动函数
const easing = 0.15;
const
difference = targe
tHeight - coverHeight;
// 如果差异很小，直接设置目标值
if (Math.abs(
difference) < 1) {
coverHeight = targe
tHeight;
coverContainer.style.height = coverHeight + 'px';
isAnimating = false;
return;
}
// 应用缓动效果
coverHeight +=
difference * easing;
// 应用高度变化
coverContainer.style.height = coverHeight + 'px';
// 继续动画
animationId = requestAnimationFrame(animateCover);
}
// 添加键盘支持
window.addEventListener('keydown', function(e) {
if (e.key === 'ArrowDown') {
h
andleScroll(40);
e.preventDefault();
} else if (e.key === 'ArrowUp') {
h
andleScroll(-40);
e.preventDefault();
} else if (e.key === ' ') {
// 空格键跳转到底部或顶部
if (coverHeight < totalConten
tHeight / 2) {
targe
tHeight = totalConten
tHeight;
} else {
targe
tHeight = 0;
}
if (!isAnimating) {
isAnimating = true;
animateCover();
}
e.preventDefault();
}
});
// 平滑滚动到锚点
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
// 如果覆盖层未展开，先展开
if (targe
tHeight < windowHeight * 0.5) {
targe
tHeight = windowHeight;
if (!isAnimating) {
isAnimating = true;
animateCover();
}
}
// 计算目标位置
const targetPosition = targetElement.offsetTop;
// 平滑滚动到目标位置
coverContainer.scrollTo({
top
: targetPosition,
behavior
: 'smooth'
});
}
});
});
// 初始化
coverContainer.style.height = '0px';
// 监听窗口大小变化
window.addEventListener('resize', function() {
// 重新计算内容高度
totalConten
tHeight = 0;
contentBlocks.forEach(block => {
totalConten
tHeight += block.offse
tHeight;
});
});
})();
</script>
</body>
</html> 添加详细注释
本文介绍了CSS中两种隐藏元素的方法：visibility:hidden与display:none的区别。visibility:hidden使元素不可见但仍保留其空间；而display:none则移除元素所占的空间，如同元素不存在一般。
扫一扫
5940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
