Main Page
{{#css /* ── Van Gogh / Starry sky before TOC (pure CSS) ── */ /* 可调变量 */
- root{
--vg-height: 240px; /* 高度，按需改 */ --swirl-duration: 40s; /* 轮转速度 */ --bg-deep: #07102a; --bg-mid: #12336a; --accent: #f7c85a;
}
/* 确保目录本身仍正常显示，并为伪元素提供定位上下文 */
- toc, .toc {
position: relative; z-index: 1;
}
/* 基底图层（伪元素 before）——深色 + 画笔感渐变 */
- toc::before {
content: ""; display: block; width: 100%; height: var(--vg-height); margin-bottom: 1rem; border-radius: 8px; overflow: hidden; position: relative; background: /* 大范围色块（类似夜空底色）*/ radial-gradient(1200px 400px at 10% 20%, rgba(247,200,90,0.10), transparent 20%), conic-gradient(from 120deg at 50% 50%, var(--bg-deep), var(--bg-mid), #1b4b7a); filter: contrast(115%) saturate(120%) blur(2px); transform-origin: 50% 50%; will-change: transform, filter; animation: vg-rotate var(--swirl-duration) linear infinite; box-shadow: 0 2px 18px rgba(2,6,20,0.45) inset;
}
/* 画笔状纹理（叠在基底上，利用 repeating-linear-gradient 模拟笔触）*/
- toc::before {
background-image: repeating-linear-gradient(120deg, rgba(255,255,255,0.02) 0 6px, transparent 6px 18px), radial-gradient(1200px 400px at 10% 20%, rgba(247,200,90,0.10), transparent 20%), conic-gradient(from 120deg at 50% 50%, var(--bg-deep), var(--bg-mid), #1b4b7a); background-blend-mode: overlay, normal, normal; background-size: cover;
}
/* 星点层（伪元素 after）——多个 radial-gradient 放在不同位置模拟随机星点 */
- toc::after{
content: ""; position: absolute; left: 0; top: 0; width: 100%; height: var(--vg-height); pointer-events: none; mix-blend-mode: screen; background-image: radial-gradient(circle at 8% 20%, rgba(255,245,210,1) 0.6px, transparent 1px), radial-gradient(circle at 22% 42%, rgba(255,255,255,0.95) 0.8px, transparent 1px), radial-gradient(circle at 35% 30%, rgba(255,235,190,0.95) 0.7px, transparent 1px), radial-gradient(circle at 58% 18%, rgba(255,250,220,0.95) 0.9px, transparent 1px), radial-gradient(circle at 72% 60%, rgba(255,255,255,0.9) 0.6px, transparent 1px), radial-gradient(circle at 86% 38%, rgba(255,240,200,0.9) 0.8px, transparent 1px); background-repeat: no-repeat; filter: drop-shadow(0 0 6px rgba(255,220,120,0.12)); animation: star-twinkle 3.8s ease-in-out infinite alternate; z-index: 2;
}
/* 小“月亮”高光（叠加） */
- toc .vg-moon{
display: none; /* 如果你能编辑 HTML 可用下面的 HTML 标记显示月亮，否则可忽视 */
}
/* 动画 */ @keyframes vg-rotate {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(4deg) scale(1.01); }
100% { transform: rotate(0deg) scale(1); }
}
@keyframes star-twinkle {
0% { opacity: 0.7; transform: scale(0.98); filter: blur(0.2px); }
100% { opacity: 1; transform: scale(1.05); filter: blur(0px); }
}
/* 响应式：手机端高度更小 */ @media (max-width:720px){
:root{ --vg-height: 160px; --swirl-duration: 30s; }
} }} 这里是清冽之泉，提供电脑教程、好书点评。图文优质教程、有趣视频讲解，静待你的光临。
近期关注
法考
- 客观
- 主观
法典
- 理论
- 刑
- 民
- 商经知
- 行政
- 其他