优化首页样式
This commit is contained in:
+242
-19
@@ -3,12 +3,116 @@
|
||||
========================================= */
|
||||
|
||||
/* --- Hero 区域 --- */
|
||||
.site-main {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
padding: 120px 0 80px;
|
||||
padding: 40px 0;
|
||||
background-color: var(--bg-body);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
background-image: none;
|
||||
min-height: calc(100vh - var(--header-height));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
isolation: isolate;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-scroll-indicator {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 28px;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
z-index: 4;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.45s var(--ease-in-out), transform 0.45s var(--ease-in-out);
|
||||
}
|
||||
|
||||
.hero-scroll-indicator .scroll-arrow {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-right: 2px solid currentColor;
|
||||
border-bottom: 2px solid currentColor;
|
||||
transform: rotate(45deg);
|
||||
animation: hero-scroll-bounce 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hero-scroll-indicator .scroll-text {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.3em;
|
||||
}
|
||||
|
||||
@keyframes hero-scroll-bounce {
|
||||
0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.5; }
|
||||
50% { transform: translateY(6px) rotate(45deg); opacity: 1; }
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.home-hero-initial .site-header {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.home-hero-initial .site-header,
|
||||
.home-hero-scrolled .site-header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.home-hero-initial .hero-scroll-indicator {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
.home-hero-scrolled .hero-scroll-indicator {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(10px);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-waves {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 140vh;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
mix-blend-mode: screen;
|
||||
filter: saturate(1.08);
|
||||
display: block;
|
||||
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 55%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0) 100%);
|
||||
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 55%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0) 100%);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: 100% 100%;
|
||||
mask-size: 100% 100%;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .hero-waves {
|
||||
opacity: 0.55;
|
||||
mix-blend-mode: multiply;
|
||||
filter: saturate(1.2);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .hero-waves {
|
||||
opacity: 0.5;
|
||||
mix-blend-mode: screen;
|
||||
filter: saturate(1.08);
|
||||
}
|
||||
|
||||
/* 底部渐变遮罩 */
|
||||
@@ -22,18 +126,82 @@
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 大标题 */
|
||||
.hero-content h1 {
|
||||
font-size: 4rem; /* 增大 Hero 标题 (原3.5rem) */
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 1.5rem;
|
||||
background: linear-gradient(135deg, var(--text-primary) 0%, var(--color-primary) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
line-height: 1.2;
|
||||
.hero-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 0 1.2rem;
|
||||
overflow: visible;
|
||||
--hero-title-gradient: linear-gradient(135deg, var(--text-primary) 0%, var(--color-primary) 100%);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-title-svg {
|
||||
display: block;
|
||||
width: min(88vw, 900px);
|
||||
margin: 0 auto;
|
||||
aspect-ratio: 3 / 2;
|
||||
background-image: var(--hero-title-gradient);
|
||||
-webkit-mask: url("../../resources/title.svg") center / contain no-repeat;
|
||||
mask: url("../../resources/title.svg") center / contain no-repeat;
|
||||
filter:
|
||||
drop-shadow(0 10px 24px rgba(12, 20, 32, 0.25))
|
||||
drop-shadow(0 0 18px rgba(120, 190, 255, 0.28));
|
||||
position: relative;
|
||||
transform: translateY(-8px) scale(1.06);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.hero-title-svg::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -6% -4%;
|
||||
background:
|
||||
radial-gradient(circle at 30% 35%, rgba(255, 255, 255, 0.35), transparent 55%),
|
||||
radial-gradient(circle at 70% 45%, rgba(140, 205, 255, 0.28), transparent 60%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
|
||||
-webkit-mask: url("../../resources/title.svg") center / contain no-repeat;
|
||||
mask: url("../../resources/title.svg") center / contain no-repeat;
|
||||
opacity: 0.22;
|
||||
filter: blur(6px);
|
||||
mix-blend-mode: screen;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
html:not([data-theme="dark"]) .hero-title-svg::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hero-title-svg::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
height: 55%;
|
||||
background-image: var(--hero-title-gradient);
|
||||
-webkit-mask: url("../../resources/title.svg") center / contain no-repeat;
|
||||
mask: url("../../resources/title.svg") center / contain no-repeat;
|
||||
transform: scaleY(-1);
|
||||
opacity: 0.18;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.hero-title-text {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* 描述文本 (代码风格) */
|
||||
@@ -52,11 +220,18 @@
|
||||
|
||||
/* --- 服务展示区 (Services) --- */
|
||||
.services-provided {
|
||||
margin-top: 5rem;
|
||||
margin-top: 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.services-section {
|
||||
padding: 80px 0;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--bg-body) 55%);
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 标题带有命令提示符风格 */
|
||||
.services-provided h2 {
|
||||
font-size: 1.8rem; /* 增大服务标题 (原1.5rem) */
|
||||
@@ -85,8 +260,8 @@
|
||||
}
|
||||
|
||||
.service-item {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-default);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 32px 24px;
|
||||
display: flex;
|
||||
@@ -99,8 +274,7 @@
|
||||
|
||||
.service-item:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--color-primary-light);
|
||||
box-shadow: var(--shadow-lg);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
@@ -129,17 +303,66 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-content h1 {
|
||||
font-size: 2.25rem;
|
||||
.hero-title {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-title-svg {
|
||||
width: min(92vw, 560px);
|
||||
transform: translateY(-6px) scale(1.03);
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.services-section {
|
||||
padding: 28px 0;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
min-height: auto;
|
||||
padding: 16px 0 16px;
|
||||
}
|
||||
|
||||
.hero-waves {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-scroll-indicator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.services-grid-box {
|
||||
grid-template-columns: 1fr; /* 手机端单列 */
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.service-item {
|
||||
padding: 12px 8px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.service-item:hover {
|
||||
transform: none;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.service-icon svg {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.service-item span {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,7 +13,8 @@
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
/* 使用半透明背景以增强毛玻璃效果 */
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
transition: background-color var(--duration-normal), border-color var(--duration-normal);
|
||||
transition: background-color var(--duration-normal), border-color var(--duration-normal), transform 0.45s var(--ease-in-out);
|
||||
will-change: transform;
|
||||
flex-shrink: 0; /* 防止被父容器 Flex 布局压缩 */
|
||||
}
|
||||
|
||||
|
||||
@@ -292,6 +292,11 @@ html:not([data-theme="dark"]) .intro-about .site-header {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
/* Stream text characters */
|
||||
.stream-char {
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
.intro-animate {
|
||||
transition: opacity 0.8s var(--ease-in-out), transform 0.8s var(--ease-in-out);
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
(() => {
|
||||
const main = document.querySelector('.site-main');
|
||||
const heroSection = document.querySelector('.hero-section');
|
||||
const servicesSection = document.querySelector('.services-section');
|
||||
const canvas = document.querySelector('.hero-waves');
|
||||
if (!main || !canvas) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
let width = 0;
|
||||
let height = 0;
|
||||
let dpr = 1;
|
||||
let rafId = null;
|
||||
|
||||
const waveDefs = [
|
||||
{ yRatio: 0.3, amplitude: 22, wavelength: 940, speed: 0.5, alpha: 0.98 },
|
||||
{ yRatio: 0.45, amplitude: 16, wavelength: 1020, speed: 0.58, alpha: 0.92 },
|
||||
{ yRatio: 0.65, amplitude: 14, wavelength: 1160, speed: 0.6, alpha: 0.9 },
|
||||
];
|
||||
|
||||
const palettes = {
|
||||
light: {
|
||||
gradient: ['#e8f3ff', '#cfe6fb', '#558ec1', '#2476af', '#2b6fb3'],
|
||||
waves: ['rgba(170, 215, 245, 0.91)', 'rgba(120, 185, 230, 0.93)', 'rgba(80, 155, 210, 0.95)'],
|
||||
},
|
||||
dark: {
|
||||
gradient: ['#0d1117', '#111d2b', '#14334d', '#17507a', '#1b6aa6'],
|
||||
waves: ['rgba(90, 165, 225, 0.9)', 'rgba(65, 140, 210, 0.88)', 'rgba(50, 120, 190, 0.86)'],
|
||||
},
|
||||
};
|
||||
|
||||
const getTheme = () => (document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light');
|
||||
|
||||
const getCoverageHeight = () => {
|
||||
if (servicesSection) {
|
||||
const coverage = servicesSection.offsetTop + servicesSection.offsetHeight * 0.5;
|
||||
return Math.min(coverage, main.scrollHeight);
|
||||
}
|
||||
if (heroSection) {
|
||||
return heroSection.offsetHeight;
|
||||
}
|
||||
return main.scrollHeight;
|
||||
};
|
||||
|
||||
const resize = () => {
|
||||
dpr = window.devicePixelRatio || 1;
|
||||
width = main.clientWidth;
|
||||
height = Math.max(1, Math.round(getCoverageHeight()));
|
||||
canvas.width = Math.floor(width * dpr);
|
||||
canvas.height = Math.floor(height * dpr);
|
||||
canvas.style.width = `${width}px`;
|
||||
canvas.style.height = `${height}px`;
|
||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
};
|
||||
|
||||
const drawBackground = (palette) => {
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, height);
|
||||
gradient.addColorStop(0, palette.gradient[0]);
|
||||
gradient.addColorStop(0.35, palette.gradient[1]);
|
||||
gradient.addColorStop(0.55, palette.gradient[2]);
|
||||
gradient.addColorStop(0.75, palette.gradient[3]);
|
||||
gradient.addColorStop(1, palette.gradient[4]);
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
};
|
||||
|
||||
const drawWave = (palette, wave, time, index) => {
|
||||
const yBase = height * wave.yRatio;
|
||||
const phase = time * wave.speed;
|
||||
const prevAlpha = ctx.globalAlpha;
|
||||
ctx.globalAlpha = wave.alpha ?? 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, height);
|
||||
for (let x = 0; x <= width; x += 18) {
|
||||
const theta = (x / wave.wavelength) * Math.PI * 2 + phase;
|
||||
const y = yBase + Math.sin(theta) * wave.amplitude;
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
ctx.lineTo(width, height);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = palette.waves[index % palette.waves.length];
|
||||
ctx.fill();
|
||||
ctx.globalAlpha = prevAlpha;
|
||||
};
|
||||
|
||||
const render = (timestamp) => {
|
||||
const palette = palettes[getTheme()];
|
||||
const time = timestamp * 0.001;
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
drawBackground(palette);
|
||||
waveDefs.forEach((wave, index) => drawWave(palette, wave, time, index));
|
||||
rafId = requestAnimationFrame(render);
|
||||
};
|
||||
|
||||
const stop = () => {
|
||||
if (rafId) {
|
||||
cancelAnimationFrame(rafId);
|
||||
rafId = null;
|
||||
}
|
||||
};
|
||||
|
||||
const drawStatic = () => {
|
||||
const palette = palettes[getTheme()];
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
drawBackground(palette);
|
||||
waveDefs.forEach((wave, index) => drawWave(palette, wave, 0, index));
|
||||
};
|
||||
|
||||
const start = () => {
|
||||
stop();
|
||||
resize();
|
||||
if (prefersReduced.matches) {
|
||||
drawStatic();
|
||||
return;
|
||||
}
|
||||
rafId = requestAnimationFrame(render);
|
||||
};
|
||||
|
||||
const onResize = () => {
|
||||
resize();
|
||||
if (prefersReduced.matches) {
|
||||
drawStatic();
|
||||
}
|
||||
};
|
||||
|
||||
const themeObserver = new MutationObserver(() => {
|
||||
if (prefersReduced.matches) {
|
||||
drawStatic();
|
||||
}
|
||||
});
|
||||
|
||||
themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
|
||||
prefersReduced.addEventListener('change', start);
|
||||
window.addEventListener('resize', onResize);
|
||||
window.addEventListener('load', onResize);
|
||||
|
||||
start();
|
||||
})();
|
||||
@@ -0,0 +1,40 @@
|
||||
(() => {
|
||||
const hero = document.querySelector('.hero-section');
|
||||
if (!hero) return;
|
||||
|
||||
const body = document.body;
|
||||
const desktopQuery = window.matchMedia('(min-width: 900px)');
|
||||
let hasScrolled = false;
|
||||
|
||||
const applyState = () => {
|
||||
if (!desktopQuery.matches) {
|
||||
body.classList.remove('home-hero-initial', 'home-hero-scrolled');
|
||||
return;
|
||||
}
|
||||
|
||||
if (hasScrolled || window.scrollY > 6) {
|
||||
body.classList.remove('home-hero-initial');
|
||||
body.classList.add('home-hero-scrolled');
|
||||
} else {
|
||||
body.classList.add('home-hero-initial');
|
||||
body.classList.remove('home-hero-scrolled');
|
||||
}
|
||||
};
|
||||
|
||||
const onScroll = () => {
|
||||
hasScrolled = window.scrollY > 6;
|
||||
applyState();
|
||||
};
|
||||
|
||||
const onResize = () => {
|
||||
if (!desktopQuery.matches) {
|
||||
hasScrolled = false;
|
||||
}
|
||||
applyState();
|
||||
};
|
||||
|
||||
applyState();
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
window.addEventListener('resize', onResize);
|
||||
desktopQuery.addEventListener('change', onResize);
|
||||
})();
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const container = document.querySelector('.hero-description');
|
||||
const container = document.querySelector('.stream-text') || document.querySelector('.hero-description');
|
||||
if (!container) return;
|
||||
|
||||
const cnText = container.getAttribute('data-cn') || '';
|
||||
|
||||
Reference in New Issue
Block a user