310a5da94f
Completely redesigns the webpage, moving from a centered, neon-futuristic aesthetic to a modern, asymmetrical grid layout. This change aims to create a more dynamic and visually engaging user experience. - Layout: Implemented a CSS Grid with distinct sections for header, sidebar, and main content. - Styling: Replaced the neon color palette and fonts with a new theme using Montserrat and Playfair Display. - Interactivity: Removed the theme color switcher and replaced static neon effects with scroll-triggered fade-in animations.
506 lines
15 KiB
HTML
506 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>创新布局 - 非对称网页设计</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&family=Playfair+Display:wght@400;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--primary: #2563eb;
|
|
--secondary: #8b5cf6;
|
|
--accent: #ec4899;
|
|
--dark: #0f172a;
|
|
--light: #f8fafc;
|
|
--gray: #94a3b8;
|
|
--transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, var(--dark), #1e293b);
|
|
color: var(--light);
|
|
min-height: 100vh;
|
|
font-family: 'Montserrat', sans-serif;
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* 非对称网格布局 */
|
|
.layout-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.5fr;
|
|
grid-template-rows: auto auto auto;
|
|
gap: 30px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* 网格区域定义 */
|
|
.header {
|
|
grid-column: 1 / 3;
|
|
grid-row: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 0;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.sidebar {
|
|
grid-column: 1;
|
|
grid-row: 2 / 4;
|
|
background: rgba(15, 23, 42, 0.7);
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.main-content {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
background: rgba(15, 23, 42, 0.7);
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.feature-section {
|
|
grid-column: 2;
|
|
grid-row: 3;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
/* 装饰元素 */
|
|
.floating-shapes {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.shape {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
opacity: 0.1;
|
|
filter: blur(40px);
|
|
}
|
|
|
|
.shape-1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: var(--primary);
|
|
top: -100px;
|
|
left: -100px;
|
|
}
|
|
|
|
.shape-2 {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: var(--accent);
|
|
bottom: -50px;
|
|
right: -50px;
|
|
}
|
|
|
|
.shape-3 {
|
|
width: 200px;
|
|
height: 200px;
|
|
background: var(--secondary);
|
|
top: 50%;
|
|
left: 70%;
|
|
}
|
|
|
|
/* 标题样式 */
|
|
.logo {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(to right, var(--primary), var(--accent));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 30px;
|
|
}
|
|
|
|
.nav-links a {
|
|
color: var(--light);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: var(--transition);
|
|
position: relative;
|
|
}
|
|
|
|
.nav-links a::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background: linear-gradient(to right, var(--primary), var(--accent));
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.nav-links a:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
/* 侧边栏内容 */
|
|
.sidebar-content {
|
|
text-align: right;
|
|
}
|
|
|
|
.sidebar-title {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 3.5rem;
|
|
font-weight: 800;
|
|
margin-bottom: 20px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.sidebar-subtitle {
|
|
font-size: 1.2rem;
|
|
color: var(--gray);
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.sidebar-cta {
|
|
display: inline-block;
|
|
padding: 15px 35px;
|
|
background: linear-gradient(to right, var(--primary), var(--secondary));
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 30px;
|
|
font-weight: 600;
|
|
transition: var(--transition);
|
|
box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
|
|
}
|
|
|
|
.sidebar-cta:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
|
|
}
|
|
|
|
/* 主内容区域 */
|
|
.content-box {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.content-title {
|
|
font-size: 1.8rem;
|
|
margin-bottom: 20px;
|
|
color: var(--light);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.original-text {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
padding: 25px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 15px;
|
|
display: inline-block;
|
|
margin: 20px 0;
|
|
border-left: 4px solid var(--accent);
|
|
transform: skewX(-5deg);
|
|
}
|
|
|
|
.quote-icon {
|
|
font-size: 1.8rem;
|
|
margin: 0 10px;
|
|
color: var(--accent);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* 特性卡片 */
|
|
.feature-card {
|
|
background: rgba(15, 23, 42, 0.7);
|
|
border-radius: 15px;
|
|
padding: 25px;
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
|
|
transition: var(--transition);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
height: 100%;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.feature-card i {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 15px;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.feature-card h3 {
|
|
font-size: 1.4rem;
|
|
margin-bottom: 15px;
|
|
color: var(--light);
|
|
}
|
|
|
|
.feature-card p {
|
|
color: var(--gray);
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 1200px) {
|
|
.layout-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.header, .sidebar, .main-content, .feature-section {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.sidebar {
|
|
grid-row: 2;
|
|
}
|
|
|
|
.main-content {
|
|
grid-row: 3;
|
|
}
|
|
|
|
.feature-section {
|
|
grid-row: 4;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.feature-section {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.header {
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.nav-links {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sidebar-title {
|
|
font-size: 2.8rem;
|
|
}
|
|
|
|
.original-text {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
/* 动画效果 */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate {
|
|
animation: fadeInUp 0.8s ease-out forwards;
|
|
}
|
|
|
|
.delay-1 {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.delay-2 {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.delay-3 {
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
/* 页脚 */
|
|
footer {
|
|
text-align: center;
|
|
margin-top: 80px;
|
|
padding: 40px 0;
|
|
color: var(--gray);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.social-links a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: var(--light);
|
|
font-size: 1.3rem;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.social-links a:hover {
|
|
background: linear-gradient(to right, var(--primary), var(--secondary));
|
|
transform: translateY(-5px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 装饰形状 -->
|
|
<div class="floating-shapes">
|
|
<div class="shape shape-1"></div>
|
|
<div class="shape shape-2"></div>
|
|
<div class="shape shape-3"></div>
|
|
</div>
|
|
|
|
<!-- 主布局网格 -->
|
|
<div class="layout-grid">
|
|
<!-- 头部 -->
|
|
<header class="header animate">
|
|
<div class="logo">Asymmetry</div>
|
|
<nav class="nav-links">
|
|
<a href="#">首页</a>
|
|
<a href="#">关于</a>
|
|
<a href="#">服务</a>
|
|
<a href="#">作品</a>
|
|
<a href="#">联系</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- 侧边栏 -->
|
|
<aside class="sidebar animate delay-1">
|
|
<div class="sidebar-content">
|
|
<h1 class="sidebar-title">创新非对称布局设计</h1>
|
|
<p class="sidebar-subtitle">打破传统网格，创造视觉张力与动态平衡</p>
|
|
<a href="#" class="sidebar-cta">探索更多</a>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 主内容 -->
|
|
<main class="main-content animate delay-2">
|
|
<div class="content-box">
|
|
<h2 class="content-title">重新定义网页美学</h2>
|
|
<p>我们打破了传统的对称布局，采用大胆的非对称设计，创造独特的视觉层次和动态平衡。</p>
|
|
</div>
|
|
|
|
<div class="content-box">
|
|
<h2 class="content-title">原始内容的新生</h2>
|
|
<div class="original-text">
|
|
<i class="fas fa-quote-left quote-icon"></i> 啥都没有 <i class="fas fa-quote-right quote-icon"></i>
|
|
</div>
|
|
<p>在非对称设计中，空白和内容同样重要，创造视觉焦点和流动感。</p>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 特性区域 -->
|
|
<section class="feature-section animate delay-3">
|
|
<div class="feature-card">
|
|
<i class="fas fa-paint-brush"></i>
|
|
<h3>视觉层次</h3>
|
|
<p>通过大小、颜色和位置的变化，创建清晰的视觉层次结构，引导用户视线流动。</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<i class="fas fa-mobile-alt"></i>
|
|
<h3>动态平衡</h3>
|
|
<p>非对称布局通过视觉权重的分配实现动态平衡，创造更有机的视觉体验。</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<i class="fas fa-lightbulb"></i>
|
|
<h3>创新表达</h3>
|
|
<p>打破传统网格限制，为内容提供更具创意和表现力的展示方式。</p>
|
|
</div>
|
|
|
|
<div class="feature-card">
|
|
<i class="fas fa-eye"></i>
|
|
<h3>视觉焦点</h3>
|
|
<p>通过非对称布局突出重要内容，创建明确的视觉焦点和用户路径。</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>© 2023 创新非对称布局设计 | 打破常规，创造非凡</p>
|
|
<div class="social-links">
|
|
<a href="#"><i class="fab fa-twitter"></i></a>
|
|
<a href="#"><i class="fab fa-instagram"></i></a>
|
|
<a href="#"><i class="fab fa-dribbble"></i></a>
|
|
<a href="#"><i class="fab fa-github"></i></a>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// 添加滚动动画效果
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const animatedElements = document.querySelectorAll('.animate');
|
|
|
|
// 初始隐藏所有动画元素
|
|
animatedElements.forEach(element => {
|
|
element.style.opacity = '0';
|
|
});
|
|
|
|
// 添加滚动事件监听器
|
|
window.addEventListener('scroll', function() {
|
|
animatedElements.forEach(element => {
|
|
const elementTop = element.getBoundingClientRect().top;
|
|
const elementBottom = element.getBoundingClientRect().bottom;
|
|
|
|
// 如果元素在视口中
|
|
if (elementTop < window.innerHeight - 100 && elementBottom > 0) {
|
|
element.style.animationPlayState = 'running';
|
|
element.style.opacity = '1';
|
|
}
|
|
});
|
|
});
|
|
|
|
// 触发初始滚动检查
|
|
window.dispatchEvent(new Event('scroll'));
|
|
|
|
// 为原始文本添加点击动画
|
|
const originalText = document.querySelector('.original-text');
|
|
originalText.addEventListener('click', function() {
|
|
this.style.transform = 'skewX(-5deg) scale(1.05)';
|
|
setTimeout(() => {
|
|
this.style.transform = 'skewX(-5deg) scale(1)';
|
|
}, 300);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |