|
|
| Line 3: |
Line 3: |
| |description=Welcome to the Qingliezhiquan Blog. Learn to write programs, use computers better, and choose great books. Focus on Windows, Debian, ArchLinux and MediaWiki with step-by-step guides, pictures, and videos. | | |description=Welcome to the Qingliezhiquan Blog. Learn to write programs, use computers better, and choose great books. Focus on Windows, Debian, ArchLinux and MediaWiki with step-by-step guides, pictures, and videos. |
| |keywords=qingliezhiquan, tutorials, Windows, Debian, MediaWiki, ArchLinux, books, reading, learning, guides, 清冽之泉, 电脑, 如何, 怎么, 安装, 实现, 解决, 问题, 手册, 中文, computers, solutions, how, Microsoft, Office, Word, Excel}} | | |keywords=qingliezhiquan, tutorials, Windows, Debian, MediaWiki, ArchLinux, books, reading, learning, guides, 清冽之泉, 电脑, 如何, 怎么, 安装, 实现, 解决, 问题, 手册, 中文, computers, solutions, how, Microsoft, Office, Word, Excel}} |
| {{#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; }
| |
| }
| |
| }}
| |
| 这里是清冽之泉，提供电脑教程、好书点评。图文优质教程、有趣视频讲解，静待你的光临。 | | 这里是清冽之泉，提供电脑教程、好书点评。图文优质教程、有趣视频讲解，静待你的光临。 |
|
| |
|