张翔
333 lines
19 KiB
HTML
333 lines
19 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>Hero 动画风格 Demo</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #111; color: #fff; }
|
|
|
|
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; gap: 8px; padding: 16px 24px; background: rgba(0,0,0,0.8); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.1); }
|
|
.nav button { padding: 8px 20px; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; background: transparent; color: #fff; cursor: pointer; font-size: 14px; transition: all 0.3s; }
|
|
.nav button:hover { background: rgba(255,255,255,0.1); }
|
|
.nav button.active { background: #C41E3A; border-color: #C41E3A; }
|
|
|
|
.demo-section { display: none; position: relative; min-height: 100vh; overflow: hidden; }
|
|
.demo-section.active { display: flex; }
|
|
|
|
.hero-content { position: relative; z-index: 10; max-width: 720px; padding: 0 48px; }
|
|
.hero-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; margin-bottom: 24px; }
|
|
.hero-title { font-size: 64px; font-weight: 400; line-height: 1.1; margin-bottom: 20px; letter-spacing: -0.02em; }
|
|
.hero-subtitle { font-size: 24px; font-weight: 600; margin-bottom: 12px; }
|
|
.hero-desc { font-size: 18px; line-height: 1.7; margin-bottom: 36px; opacity: 0.7; }
|
|
.hero-buttons { display: flex; gap: 16px; }
|
|
.btn-primary { padding: 14px 32px; background: #C41E3A; color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
|
|
.btn-outline { padding: 14px 32px; background: transparent; color: #1C1C1C; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; font-size: 16px; cursor: pointer; }
|
|
|
|
.style-label { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 8px 24px; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); border-radius: 999px; font-size: 13px; color: rgba(255,255,255,0.6); z-index: 100; }
|
|
|
|
/* ========== Style A: 沉稳专业 ========== */
|
|
#style-a { background: linear-gradient(180deg, #FFFBF5 0%, #FFFFFF 100%); color: #1C1C1C; align-items: center; justify-content: flex-start; padding-top: 20vh; }
|
|
#style-a .hero-tag { background: #FEF2F4; color: #C41E3A; border: 1px solid rgba(196,30,58,0.1); }
|
|
#style-a .hero-subtitle { color: #C41E3A; }
|
|
#style-a .btn-primary { background: #C41E3A; color: #fff; }
|
|
#style-a .btn-outline { color: #1C1C1C; border-color: rgba(28,28,28,0.2); }
|
|
|
|
#style-a .deco-circle-1 { position: absolute; top: 80px; right: 120px; width: 96px; height: 96px; border: 1px solid rgba(196,30,58,0.08); border-radius: 50%; }
|
|
#style-a .deco-circle-2 { position: absolute; bottom: 120px; left: 80px; width: 72px; height: 72px; border: 1px solid rgba(196,30,58,0.06); border-radius: 50%; }
|
|
#style-a .deco-line { position: absolute; top: 200px; right: 200px; width: 200px; height: 1px; background: linear-gradient(90deg, transparent, rgba(196,30,58,0.1), transparent); }
|
|
|
|
/* A animations */
|
|
@keyframes a-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
|
|
@keyframes a-circle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
|
|
@keyframes a-line-shimmer { 0% { opacity: 0.3; } 50% { opacity: 0.8; } 100% { opacity: 0.3; } }
|
|
|
|
#style-a .hero-tag { animation: a-fade-up 0.6s ease-out 0.1s both; }
|
|
#style-a .hero-title { animation: a-fade-up 0.6s ease-out 0.2s both; }
|
|
#style-a .hero-subtitle { animation: a-fade-up 0.6s ease-out 0.3s both; }
|
|
#style-a .hero-desc { animation: a-fade-up 0.6s ease-out 0.4s both; }
|
|
#style-a .hero-buttons { animation: a-fade-up 0.6s ease-out 0.5s both; }
|
|
#style-a .deco-circle-1 { animation: a-circle-float 6s ease-in-out infinite; }
|
|
#style-a .deco-circle-2 { animation: a-circle-float 8s ease-in-out 1s infinite; }
|
|
#style-a .deco-line { animation: a-line-shimmer 4s ease-in-out infinite; }
|
|
|
|
/* ========== Style B: 科技动感 ========== */
|
|
#style-b { background: #0A0A0A; color: #fff; align-items: center; justify-content: flex-start; padding-top: 20vh; }
|
|
#style-b .hero-tag { background: rgba(196,30,58,0.15); color: #ff6b7a; border: 1px solid rgba(196,30,58,0.3); }
|
|
#style-b .hero-title { color: #fff; }
|
|
#style-b .hero-subtitle { color: #ff6b7a; }
|
|
#style-b .hero-desc { color: rgba(255,255,255,0.6); }
|
|
#style-b .btn-primary { background: #C41E3A; color: #fff; }
|
|
#style-b .btn-outline { color: #fff; border-color: rgba(255,255,255,0.2); }
|
|
|
|
#style-b .grid-bg { position: absolute; inset: 0; background-image:
|
|
linear-gradient(rgba(196,30,58,0.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(196,30,58,0.05) 1px, transparent 1px);
|
|
background-size: 60px 60px;
|
|
mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black 20%, transparent 70%);
|
|
}
|
|
#style-b .glow-1 { position: absolute; top: 10%; right: 15%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(196,30,58,0.15) 0%, transparent 70%); filter: blur(60px); border-radius: 50%; }
|
|
#style-b .glow-2 { position: absolute; bottom: 20%; left: 10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(100,100,255,0.1) 0%, transparent 70%); filter: blur(60px); border-radius: 50%; }
|
|
|
|
/* B particles */
|
|
#style-b .particles { position: absolute; inset: 0; }
|
|
#style-b .particle { position: absolute; width: 3px; height: 3px; background: rgba(196,30,58,0.6); border-radius: 1px; }
|
|
|
|
@keyframes b-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
|
|
@keyframes b-particle-float {
|
|
0% { transform: translate(0, 0) scale(1); opacity: 0; }
|
|
10% { opacity: 1; }
|
|
90% { opacity: 1; }
|
|
100% { transform: translate(var(--dx), var(--dy)) scale(0.5); opacity: 0; }
|
|
}
|
|
@keyframes b-glow-pulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
|
|
@keyframes b-grid-flow { 0% { background-position: 0 0; } 100% { background-position: 60px 60px; } }
|
|
|
|
#style-b .grid-bg { animation: b-grid-flow 8s linear infinite; }
|
|
#style-b .glow-1 { animation: b-glow-pulse 6s ease-in-out infinite; }
|
|
#style-b .glow-2 { animation: b-glow-pulse 8s ease-in-out 2s infinite; }
|
|
#style-b .hero-tag { animation: b-fade-up 0.6s ease-out 0.2s both; }
|
|
#style-b .hero-title { animation: b-fade-up 0.6s ease-out 0.3s both; }
|
|
#style-b .hero-subtitle { animation: b-fade-up 0.6s ease-out 0.4s both; }
|
|
#style-b .hero-desc { animation: b-fade-up 0.6s ease-out 0.5s both; }
|
|
#style-b .hero-buttons { animation: b-fade-up 0.6s ease-out 0.6s both; }
|
|
|
|
/* ========== Style C: 东方韵味 ========== */
|
|
#style-c { background: #FAFAF5; color: #1C1C1C; align-items: center; justify-content: flex-start; padding-top: 18vh; }
|
|
#style-c .hero-tag { background: rgba(196,30,58,0.08); color: #C41E3A; border: 1px solid rgba(196,30,58,0.15); }
|
|
#style-c .hero-title { font-family: 'Noto Serif SC', 'STSong', 'SimSun', serif; font-size: 72px; font-weight: 400; }
|
|
#style-c .hero-subtitle { color: #C41E3A; }
|
|
#style-c .btn-primary { background: #C41E3A; color: #fff; }
|
|
#style-c .btn-outline { color: #1C1C1C; border-color: rgba(28,28,28,0.2); }
|
|
|
|
/* C ink effects */
|
|
#style-c .ink-bg { position: absolute; inset: 0; overflow: hidden; }
|
|
#style-c .ink-blob { position: absolute; border-radius: 50%; filter: blur(80px); }
|
|
|
|
@keyframes c-ink-spread {
|
|
0% { transform: scale(0); opacity: 0; }
|
|
30% { opacity: 0.15; }
|
|
100% { transform: scale(1); opacity: 0.08; }
|
|
}
|
|
@keyframes c-ink-drift {
|
|
0%, 100% { transform: translate(0, 0) rotate(0deg); }
|
|
25% { transform: translate(10px, -15px) rotate(2deg); }
|
|
50% { transform: translate(-5px, 10px) rotate(-1deg); }
|
|
75% { transform: translate(-10px, -5px) rotate(1deg); }
|
|
}
|
|
@keyframes c-fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
|
@keyframes c-seal-stamp {
|
|
0% { transform: scale(2) rotate(-15deg); opacity: 0; }
|
|
60% { transform: scale(0.9) rotate(2deg); opacity: 1; }
|
|
80% { transform: scale(1.05) rotate(-1deg); }
|
|
100% { transform: scale(1) rotate(0deg); opacity: 1; }
|
|
}
|
|
|
|
#style-c .ink-blob-1 { top: 5%; right: 10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(28,28,28,0.12) 0%, transparent 70%); animation: c-ink-spread 2s ease-out 0.3s both, c-ink-drift 20s ease-in-out 2.3s infinite; }
|
|
#style-c .ink-blob-2 { bottom: 10%; left: 5%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(196,30,58,0.1) 0%, transparent 70%); animation: c-ink-spread 2.5s ease-out 0.6s both, c-ink-drift 25s ease-in-out 2.6s infinite; }
|
|
#style-c .ink-blob-3 { top: 40%; right: 30%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(28,28,28,0.06) 0%, transparent 70%); animation: c-ink-spread 1.8s ease-out 0.9s both, c-ink-drift 18s ease-in-out 2s infinite; }
|
|
|
|
#style-c .seal { position: absolute; top: 15%; right: 12%; width: 80px; height: 80px; border: 3px solid #C41E3A; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: 'Noto Serif SC', serif; font-size: 28px; color: #C41E3A; transform: rotate(-8deg); animation: c-seal-stamp 0.8s ease-out 1.2s both; opacity: 0; }
|
|
|
|
#style-c .hero-tag { animation: c-fade-up 0.6s ease-out 0.2s both; }
|
|
#style-c .hero-title { animation: c-fade-up 0.8s ease-out 0.4s both; }
|
|
#style-c .hero-subtitle { animation: c-fade-up 0.6s ease-out 0.6s both; }
|
|
#style-c .hero-desc { animation: c-fade-up 0.6s ease-out 0.7s both; }
|
|
#style-c .hero-buttons { animation: c-fade-up 0.6s ease-out 0.8s both; }
|
|
|
|
/* ========== Style D: 融合创新 ========== */
|
|
#style-d { background: linear-gradient(170deg, #FFFBF5 0%, #FFF5F6 40%, #FFFFFF 100%); color: #1C1C1C; align-items: center; justify-content: flex-start; padding-top: 20vh; }
|
|
#style-d .hero-tag { background: #FEF2F4; color: #C41E3A; border: 1px solid rgba(196,30,58,0.1); }
|
|
#style-d .hero-title { font-size: 64px; }
|
|
#style-d .hero-subtitle { color: #C41E3A; }
|
|
#style-d .btn-primary { background: #C41E3A; color: #fff; }
|
|
#style-d .btn-outline { color: #1C1C1C; border-color: rgba(28,28,28,0.2); }
|
|
|
|
/* D fusion effects */
|
|
#style-d .glow-bg { position: absolute; inset: 0; overflow: hidden; }
|
|
#style-d .glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); }
|
|
|
|
@keyframes d-glow-move {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
33% { transform: translate(30px, -20px) scale(1.1); }
|
|
66% { transform: translate(-20px, 15px) scale(0.95); }
|
|
}
|
|
@keyframes d-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
|
|
@keyframes d-line-draw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
|
|
@keyframes d-seal-appear {
|
|
0% { transform: scale(1.8) rotate(-12deg); opacity: 0; }
|
|
70% { transform: scale(0.95) rotate(1deg); opacity: 0.9; }
|
|
100% { transform: scale(1) rotate(-4deg); opacity: 0.85; }
|
|
}
|
|
@keyframes d-dot-pulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.5); } }
|
|
|
|
#style-d .glow-orb-1 { top: 5%; right: 10%; width: 450px; height: 450px; background: radial-gradient(circle, rgba(196,30,58,0.08) 0%, transparent 70%); animation: d-glow-move 15s ease-in-out infinite; }
|
|
#style-d .glow-orb-2 { bottom: 15%; left: 8%; width: 350px; height: 350px; background: radial-gradient(circle, rgba(196,30,58,0.05) 0%, transparent 70%); animation: d-glow-move 20s ease-in-out 3s infinite; }
|
|
#style-d .glow-orb-3 { top: 30%; left: 40%; width: 250px; height: 250px; background: radial-gradient(circle, rgba(100,100,200,0.04) 0%, transparent 70%); animation: d-glow-move 18s ease-in-out 6s infinite; }
|
|
|
|
#style-d .seal-small { position: absolute; bottom: 25%; right: 15%; width: 56px; height: 56px; border: 2px solid rgba(196,30,58,0.6); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: 'Noto Serif SC', serif; font-size: 20px; color: rgba(196,30,58,0.6); animation: d-seal-appear 0.7s ease-out 1s both; opacity: 0; }
|
|
|
|
#style-d .tech-dots { position: absolute; top: 20%; right: 25%; }
|
|
#style-d .tech-dot { position: absolute; width: 4px; height: 4px; background: rgba(196,30,58,0.3); border-radius: 50%; animation: d-dot-pulse 3s ease-in-out infinite; }
|
|
|
|
#style-d .deco-line-svg { position: absolute; top: 15%; right: 8%; width: 200px; height: 200px; }
|
|
#style-d .deco-line-svg line { stroke: rgba(196,30,58,0.1); stroke-width: 1; stroke-dasharray: 200; animation: d-line-draw 2s ease-out 0.5s both; }
|
|
|
|
#style-d .hero-tag { animation: d-fade-up 0.5s ease-out 0.1s both; }
|
|
#style-d .hero-title { animation: d-fade-up 0.6s ease-out 0.2s both; }
|
|
#style-d .hero-subtitle { animation: d-fade-up 0.5s ease-out 0.3s both; }
|
|
#style-d .hero-desc { animation: d-fade-up 0.5s ease-out 0.4s both; }
|
|
#style-d .hero-buttons { animation: d-fade-up 0.5s ease-out 0.5s both; }
|
|
|
|
/* Replay button */
|
|
.replay-btn { position: fixed; bottom: 24px; right: 24px; z-index: 100; padding: 10px 20px; background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; backdrop-filter: blur(8px); }
|
|
.replay-btn:hover { background: rgba(0,0,0,0.8); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="nav">
|
|
<button class="active" onclick="switchStyle('a')">A 沉稳专业</button>
|
|
<button onclick="switchStyle('b')">B 科技动感</button>
|
|
<button onclick="switchStyle('c')">C 东方韵味</button>
|
|
<button onclick="switchStyle('d')">D 融合创新</button>
|
|
</div>
|
|
|
|
<!-- Style A: 沉稳专业 -->
|
|
<section id="style-a" class="demo-section active">
|
|
<div class="deco-circle-1"></div>
|
|
<div class="deco-circle-2"></div>
|
|
<div class="deco-line"></div>
|
|
<div class="hero-content">
|
|
<div class="hero-tag">✦ 智连未来，成长伙伴</div>
|
|
<h1 class="hero-title">睿新致遠</h1>
|
|
<p class="hero-subtitle">企业数字化转型服务商</p>
|
|
<p class="hero-desc">以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者</p>
|
|
<div class="hero-buttons">
|
|
<button class="btn-primary">立即咨询 →</button>
|
|
<button class="btn-outline">探索产品</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Style B: 科技动感 -->
|
|
<section id="style-b" class="demo-section">
|
|
<div class="grid-bg"></div>
|
|
<div class="glow-1"></div>
|
|
<div class="glow-2"></div>
|
|
<div class="particles" id="particles-b"></div>
|
|
<div class="hero-content">
|
|
<div class="hero-tag">✦ 智连未来，成长伙伴</div>
|
|
<h1 class="hero-title">睿新致遠</h1>
|
|
<p class="hero-subtitle">企业数字化转型服务商</p>
|
|
<p class="hero-desc">以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者</p>
|
|
<div class="hero-buttons">
|
|
<button class="btn-primary">立即咨询 →</button>
|
|
<button class="btn-outline">探索产品</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Style C: 东方韵味 -->
|
|
<section id="style-c" class="demo-section">
|
|
<div class="ink-bg">
|
|
<div class="ink-blob ink-blob-1"></div>
|
|
<div class="ink-blob ink-blob-2"></div>
|
|
<div class="ink-blob ink-blob-3"></div>
|
|
</div>
|
|
<div class="seal">睿</div>
|
|
<div class="hero-content">
|
|
<div class="hero-tag">✦ 智连未来，成长伙伴</div>
|
|
<h1 class="hero-title">睿新致遠</h1>
|
|
<p class="hero-subtitle">企业数字化转型服务商</p>
|
|
<p class="hero-desc">以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者</p>
|
|
<div class="hero-buttons">
|
|
<button class="btn-primary">立即咨询 →</button>
|
|
<button class="btn-outline">探索产品</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Style D: 融合创新 -->
|
|
<section id="style-d" class="demo-section">
|
|
<div class="glow-bg">
|
|
<div class="glow-orb glow-orb-1"></div>
|
|
<div class="glow-orb glow-orb-2"></div>
|
|
<div class="glow-orb glow-orb-3"></div>
|
|
</div>
|
|
<svg class="deco-line-svg" viewBox="0 0 200 200">
|
|
<line x1="20" y1="20" x2="180" y2="180" />
|
|
<line x1="180" y1="20" x2="20" y2="180" />
|
|
</svg>
|
|
<div class="tech-dots">
|
|
<div class="tech-dot" style="top:0;left:0;animation-delay:0s"></div>
|
|
<div class="tech-dot" style="top:0;left:20px;animation-delay:0.5s"></div>
|
|
<div class="tech-dot" style="top:20px;left:10px;animation-delay:1s"></div>
|
|
<div class="tech-dot" style="top:20px;left:30px;animation-delay:1.5s"></div>
|
|
<div class="tech-dot" style="top:40px;left:5px;animation-delay:0.3s"></div>
|
|
</div>
|
|
<div class="seal-small">睿</div>
|
|
<div class="hero-content">
|
|
<div class="hero-tag">✦ 智连未来，成长伙伴</div>
|
|
<h1 class="hero-title">睿新致遠</h1>
|
|
<p class="hero-subtitle">企业数字化转型服务商</p>
|
|
<p class="hero-desc">以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者</p>
|
|
<div class="hero-buttons">
|
|
<button class="btn-primary">立即咨询 →</button>
|
|
<button class="btn-outline">探索产品</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="style-label" id="style-label">当前：A 沉稳专业 — 微妙渐变 + 文字动效</div>
|
|
<button class="replay-btn" onclick="replayAnimation()">↻ 重播动画</button>
|
|
|
|
<script>
|
|
const labels = {
|
|
a: 'A 沉稳专业 — 微妙渐变 + 文字动效',
|
|
b: 'B 科技动感 — 流光渐变 + 粒子/网格',
|
|
c: 'C 东方韵味 — 水墨/印章 + 现代排版',
|
|
d: 'D 融合创新 — 克制科技 + 品牌印记'
|
|
};
|
|
|
|
function switchStyle(style) {
|
|
document.querySelectorAll('.demo-section').forEach(s => s.classList.remove('active'));
|
|
document.querySelectorAll('.nav button').forEach(b => b.classList.remove('active'));
|
|
document.getElementById('style-' + style).classList.add('active');
|
|
document.querySelectorAll('.nav button')[['a','b','c','d'].indexOf(style)].classList.add('active');
|
|
document.getElementById('style-label').textContent = '当前：' + labels[style];
|
|
replayAnimation();
|
|
}
|
|
|
|
function replayAnimation() {
|
|
const active = document.querySelector('.demo-section.active');
|
|
const clone = active.cloneNode(true);
|
|
active.parentNode.replaceChild(clone, active);
|
|
if (active.id === 'style-b') initParticles();
|
|
}
|
|
|
|
// Particles for Style B
|
|
function initParticles() {
|
|
const container = document.getElementById('particles-b');
|
|
if (!container) return;
|
|
container.innerHTML = '';
|
|
for (let i = 0; i < 30; i++) {
|
|
const p = document.createElement('div');
|
|
p.className = 'particle';
|
|
const x = Math.random() * 100;
|
|
const y = Math.random() * 100;
|
|
const dx = (Math.random() - 0.5) * 200;
|
|
const dy = (Math.random() - 0.5) * 200;
|
|
const dur = Math.random() * 6 + 4;
|
|
const delay = Math.random() * 4;
|
|
p.style.cssText = `left:${x}%;top:${y}%;--dx:${dx}px;--dy:${dy}px;animation:b-particle-float ${dur}s ease-in-out ${delay}s infinite;`;
|
|
container.appendChild(p);
|
|
}
|
|
}
|
|
|
|
initParticles();
|
|
</script>
|
|
</body>
|
|
</html>
|