Markdown样式收集

使用AI写的

科技感1


/* Tech Theme Markdown CSS */ /* 建议字体：Segoe UI, Roboto等现代无衬线字体 */
:root {
  --primary-color: #00f3ff;
  --secondary-color: #8a2be2;
  --background-color: #0a0e14;
  --text-color: #e6e6e6;
  --code-bg: #1a1f27;
  --border-color: #2d3544;
}
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.6;
  background-color: var(--background-color);
  color: var(--text-color);
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}
/* 标题科技渐变效果 */
h1,
h2,
h3,
h4,
h5,
h6 {
  position: relative;
  margin: 1.5em 0;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(
    45deg,
    var(--primary-color),
    var(--secondary-color)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 8px rgba(0, 243, 255, 0.2);
}
h1 {
  font-size: 2.2em;
}
h2 {
  font-size: 1.8em;
}
h3 {
  font-size: 1.5em;
}
/* 代码块 - 荧光边框效果 */
pre {
  background: var(--code-bg);
  padding: 1.5em;
  border-radius: 8px;
  border: 1px solid var(--primary-color);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);
  overflow-x: auto;
  position: relative;
}
code {
  font-family: "Fira Code", monospace;
  background: rgba(0, 243, 255, 0.1);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  color: var(--primary-color);
}
pre code {
  background: transparent;
  padding: 0;
}
/* 引用块 - 全息投影风格 */
blockquote {
  border-left: 3px solid var(--primary-color);
  margin: 1.5em 0;
  padding: 1em 1.5em;
  background: linear-gradient(
    90deg,
    rgba(10, 14, 20, 0.8) 0%,
    rgba(26, 31, 39, 0.5) 100%
  );
  border-radius: 0 5px 5px 0;
  position: relative;
}
blockquote::before {
  content: "❝";
  position: absolute;
  left: -0.8em;
  top: -0.5em;
  color: var(--primary-color);
  font-size: 2em;
  opacity: 0.5;
}
/* 表格 - 未来感透明玻璃效果 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  background: rgba(26, 31, 39, 0.8);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  overflow: hidden;
}
th,
td {
  padding: 12px;
  border: 1px solid var(--border-color);
}
th {
  background: linear-gradient(
    45deg,
    var(--primary-color),
    var(--secondary-color)
  );
  color: white;
  font-weight: 600;
}
tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}
/* 列表 - 动态符号 */
ul,
ol {
  padding-left: 1.5em;
}
ul li::marker {
  content: "▶";
  color: var(--primary-color);
}
ol {
  counter-reset: list-counter;
}
ol li {
  counter-increment: list-counter;
}
ol li::marker {
  content: counter(list-counter) ".";
  color: var(--secondary-color);
  font-weight: bold;
}
/* 链接 - 悬浮动画 */
a {
  color: var(--primary-color);
  text-decoration: none;
  position: relative;
  transition: 0.3s;
}
a:hover {
  color: #ff6bff;
  text-decoration: underline;
  text-decoration-color: var(--secondary-color);
}
/* 分割线 - 渐变效果 */
hr {
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--primary-color) 50%,
    transparent 100%
  );
  margin: 2em 0;
}
/* 数学公式 */
.katex {
  font-size: 1.1em;
  padding: 0.5em;
  background: rgba(0, 243, 255, 0.05);
  border-radius: 4px;
}
/* 任务列表 */
.task-list-item {
  list-style-type: none;
}
.task-list-item-checkbox {
  margin-right: 0.5em;
  accent-color: var(--primary-color);
}
/* 图片边框效果 */
img {
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s;
}
img:hover {
  transform: translateY(-3px);
}
/* 键盘按键样式 */
kbd {
  background: var(--code-bg);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 0.2em 0.4em;
  font-family: monospace;
  box-shadow: 0 2px 0 var(--border-color);
}
/* 响应式设计 */
@media (max-width: 768px) {
  body {
    padding: 1rem;
  }
  pre {
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 0;
  }
}

完整演示html


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>科技感Markdown样式演示</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css"
    />
    <style>
          /* 此处插入之前提供的完整CSS代码 */    :root { /* ... */ }    body { /* ... */ }    /* 保持原有CSS内容完整 */
      /* Tech Theme Markdown CSS *//* 建议字体：Segoe UI, Roboto等现代无衬线字体 */
      :root {    --primary-color: #00f3ff;    --secondary-color: #8a2be2;    --background-color: #0a0e14;    --text-color: #e6e6e6;    --code-bg: #1a1f27;    --border-color: #2d3544;}
      body {    font-family: 'Segoe UI', system-ui, sans-serif;    line-height: 1.6;    background-color: var(--background-color);    color: var(--text-color);    max-width: 800px;    margin: 0 auto;    padding: 2rem;}
      /* 标题科技渐变效果 */h1, h2, h3, h4, h5, h6 {    position: relative;    margin: 1.5em 0;    padding-bottom: 0.3em;    border-bottom: 1px solid var(--border-color);    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));    -webkit-background-clip: text;    background-clip: text;    color: transparent;    text-shadow: 0 0 8px rgba(0, 243, 255, 0.2);}
      h1 { font-size: 2.2em; }h2 { font-size: 1.8em; }h3 { font-size: 1.5em; }
      /* 代码块 - 荧光边框效果 */pre {    background: var(--code-bg);    padding: 1.5em;    border-radius: 8px;    border: 1px solid var(--primary-color);    box-shadow: 0 0 15px rgba(0, 243, 255, 0.1);    overflow-x: auto;    position: relative;}
      code {    font-family: 'Fira Code', monospace;    background: rgba(0, 243, 255, 0.1);    padding: 0.2em 0.4em;    border-radius: 3px;    color: var(--primary-color);}
      pre code {    background: transparent;    padding: 0;}
      /* 引用块 - 全息投影风格 */blockquote {    border-left: 3px solid var(--primary-color);    margin: 1.5em 0;    padding: 1em 1.5em;    background: linear-gradient(90deg, rgba(10,14,20,0.8) 0%, rgba(26,31,39,0.5) 100%);    border-radius: 0 5px 5px 0;    position: relative;}
      blockquote::before {    content: "❝";    position: absolute;    left: -0.8em;    top: -0.5em;    color: var(--primary-color);    font-size: 2em;    opacity: 0.5;}
      /* 表格 - 未来感透明玻璃效果 */table {    width: 100%;    border-collapse: collapse;    margin: 2em 0;    background: rgba(26, 31, 39, 0.8);    backdrop-filter: blur(5px);    border-radius: 8px;    overflow: hidden;}
      th, td {    padding: 12px;    border: 1px solid var(--border-color);}
      th {    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));    color: white;    font-weight: 600;}
      tr:nth-child(even) {    background: rgba(255,255,255,0.03);}
      /* 列表 - 动态符号 */ul, ol {    padding-left: 1.5em;}
      ul li::marker {    content: "▶";    color: var(--primary-color);}
      ol {    counter-reset: list-counter;}
      ol li {    counter-increment: list-counter;}
      ol li::marker {    content: counter(list-counter) ".";    color: var(--secondary-color);    font-weight: bold;}
      /* 链接 - 悬浮动画 */a {    color: var(--primary-color);    text-decoration: none;    position: relative;    transition: 0.3s;}
      a:hover {    color: #ff6bff;    text-decoration: underline;    text-decoration-color: var(--secondary-color);}
      /* 分割线 - 渐变效果 */hr {    border: 0;    height: 1px;    background: linear-gradient(90deg,         transparent 0%,         var(--primary-color) 50%,         transparent 100%);    margin: 2em 0;}
      /* 数学公式 */.katex {    font-size: 1.1em;    padding: 0.5em;    background: rgba(0, 243, 255, 0.05);    border-radius: 4px;}
      /* 任务列表 */.task-list-item {    list-style-type: none;}
      .task-list-item-checkbox {    margin-right: 0.5em;    accent-color: var(--primary-color);}
      /* 图片边框效果 */img {    max-width: 100%;    border-radius: 6px;    border: 1px solid var(--border-color);    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);    transition: transform 0.3s;}
      img:hover {    transform: translateY(-3px);}
      /* 键盘按键样式 */kbd {    background: var(--code-bg);    border: 1px solid var(--border-color);    border-radius: 3px;    padding: 0.2em 0.4em;    font-family: monospace;    box-shadow: 0 2px 0 var(--border-color);}
      /* 响应式设计 */@media (max-width: 768px) {    body {        padding: 1rem;    }
          pre {        margin-left: -1rem;        margin-right: -1rem;        border-radius: 0;    }}
    </style>
  </head>
  <body>
    <!-- 标题演示 -->
    <h1>H1 - 未来科技</h1>
    <h2>H2 - 数字革命</h2>
    <h3>H3 - 量子计算</h3>
    <!-- 段落和强调 -->
    <p>
      这是一个包含<strong>加粗文本</strong>和<em>斜体文本</em>的段落。<br />
      超链接演示：<a href="#">科技新闻</a>
    </p>
    <!-- 列表系统 -->
    <ul>
      <li>无序列表项1</li>
      <li>
        嵌套列表：
        <ul>
          <li>子项α</li>
          <li>子项β</li>
        </ul>
      </li>
    </ul>
    <ol>
      <li>有序列表1</li>
      <li>有序列表2</li>
    </ol>
    <!-- 代码区块 -->
    <pre><code>// 代码演示function quantumCompute() {    console.log("Hello Quantum World!");}</code></pre>
    <!-- 表格演示 -->
    <table>
      <thead>
        <tr>
          <th>技术</th>
          <th>应用领域</th>
          <th>成熟度</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>AI</td>
          <td>医疗诊断</td>
          <td>★★★★☆</td>
        </tr>
        <tr>
          <td>区块链</td>
          <td>数字金融</td>
          <td>★★★☆☆</td>
        </tr>
      </tbody>
    </table>
    <!-- 引用区块 -->
    <blockquote>真正的创新永远来自对现状的突破性思考。——艾伦·图灵</blockquote>
    <!-- 分割线 -->
    <hr />
    <!-- 图片演示 -->
    <p>
      <img
        src="https://tc-cdn.flowus.cn/oss/ba80a7c4-b987-4a02-9486-16d19043e73a/5543d2e32648c500194eb0ac1c10a7dea81afcb0df85fd7c0ce7ef8d55bef39b.0.PNG?time=1740996000&token=d64ce59bf4a037c75e413bcd13d63dcb09c327ecad68c0d0f1ba909861a432a2&role=sharePaid"
        alt="科技感示例图"
      />
    </p>
    <!-- 任务列表 -->
    <ul class="contains-task-list">
      <li class="task-list-item">
        <input type="checkbox" class="task-list-item-checkbox" /> 完成量子算法
      </li>
      <li class="task-list-item">
        <input type="checkbox" class="task-list-item-checkbox" /> 部署神经网路
      </li>
    </ul>
    <!-- 数学公式 -->
    <p>薛定谔方程演示：</p>
    <div class="katex">
      \[ i\hbar\frac{\partial}{\partial t} \Psi = \hat{H}\Psi \]
    </div>
    <!-- 键盘按键 -->
    <p>使用<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Q</kbd>启动量子模式</p>
    <!-- 脚注 -->
    <p>
      人工智能的发展<sup id="fnref:1"><a href="#fn:1">1</a></sup
      >正在加速...
    </p>
    <script
      defer
      src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"
    ></script>
    <script>
      // 自动渲染数学公式        document.addEventListener("DOMContentLoaded", function() {            let maths = document.getElementsByClassName('katex');            Array.prototype.forEach.call(maths, function(el) {                katex.render(el.textContent, el, {                    displayMode: el.nodeName !== 'SPAN',                    throwOnError: false                });            });        });
    </script>
  </body>
</html>

科技感2

CSS代码:


/* Universal Markdown Tech CSS */
:root {
  --starbase-blue: #00172e;
  --nebula-purple: #2d1a69;
  --plasma-orange: #ff6b35;
  --quantum-glow: #00e1ff;
  --void-black: #0a0a12;
  --starlight-white: #f0f4fc;
}
/* 重置默认样式 */
body,
h1,
h2,
h3,
p,
ul,
ol,
pre,
table {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Space Mono", monospace;
  background: var(--void-black);
  color: var(--starlight-white);
  line-height: 1.8;
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}
/* 标题系统 */
h1,
h2,
h3 {
  font-family: "Orbitron", sans-serif;
  border-left: 4px solid var(--plasma-orange);
  padding-left: 1rem;
  margin: 2rem 0 1.5rem;
}
h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.75rem;
}
/* 图片自适应方案 */
img {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  margin: 1.5rem 0;
  border: 2px solid var(--quantum-glow);
  background: linear-gradient(
    45deg,
    var(--starbase-blue) 0%,
    var(--void-black) 100%
  );
}
/* 列表系统 */
ul,
ol {
  margin: 1.5rem 0;
  padding-left: 2rem;
}
ul {
  list-style: none;
}
ul li::before {
  content: "▸";
  color: var(--plasma-orange);
  margin-right: 0.8rem;
}
ol {
  counter-reset: md-counter;
}
ol li {
  counter-increment: md-counter;
}
ol li::marker {
  content: counter(md-counter) ".";
  color: var(--quantum-glow);
}
/* 代码区块 */
pre {
  background: rgba(0, 23, 46, 0.9);
  border: 1px solid var(--quantum-glow);
  padding: 1.5rem;
  margin: 1.5rem 0;
  overflow-x: auto;
}
code {
  font-family: "Fira Code", monospace;
  color: var(--quantum-glow);
  background: rgba(0, 225, 255, 0.05);
  padding: 0.2em 0.4em;
}
/* 表格系统 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: rgba(45, 26, 105, 0.3);
}
th,
td {
  padding: 1rem;
  border: 1px solid var(--nebula-purple);
}
th {
  background: var(--nebula-purple);
  font-weight: bold;
}
/* 引用块 */
blockquote {
  border-left: 3px solid var(--quantum-glow);
  margin: 1.5rem 0;
  padding: 1rem 2rem;
  background: rgba(0, 23, 46, 0.3);
}
/* 分割线 */
hr {
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--quantum-glow) 50%,
    transparent
  );
  margin: 2rem 0;
}
/* 任务列表 */
input[type="checkbox"] {
  accent-color: var(--plasma-orange);
  margin-right: 0.5rem;
}
/* 响应式设计 */
@media (max-width: 768px) {
  body {
    padding: 1rem;
  }
  img {
    aspect-ratio: 3/2;
  }
}

科技感3


/* Cyber-Mech Markdown Theme v1.1 */
:root {
  --mech-black: #0d0d0d;
  --steel-gray: #1a1a1a;
  --neon-cyan: #00ff9d;
  --hazard-orange: #ff5e1a;
  --rust-red: #ff3d3d;
  --metal-border: #333333;
}
/* 核心修正 - 全局容器约束 */
body {
  font-family: "Rajdhani", sans-serif;
  background: var(--mech-black);
  color: #e6e6e6;
  line-height: 1.7;
  padding: 2rem 5%;
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: hidden;
  border: 3px solid var(--metal-border);
  position: relative;
  box-sizing: border-box;
}
/* 图片严格约束系统 */
img {
  /* 尺寸控制 */
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover; /* 边框系统 */
  border: 3px solid var(--metal-border);
  background: var(--steel-gray);
  padding: 0.3rem;
  margin: 2rem 0; /* 布局保护 */
  box-sizing: border-box;
  display: block;
  position: relative; /* 动态效果 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 悬停效果保持 */
img:hover {
  transform: perspective(1000px) rotateX(5deg);
  box-shadow: 0 0 30px rgba(255, 94, 26, 0.3);
  z-index: 1;
}
/* 移动端适配 */
@media (max-width: 768px) {
  body {
    padding: 1rem 3%;
    border-width: 2px;
  }
  img {
    aspect-ratio: 3/2;
    margin: 1.5rem auto;
  }
}
/* 以下保持原有机械风格不变 */
h1,
h2,
h3 {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 2rem 0;
  padding: 0.8rem 1.2rem;
  background: linear-gradient(
    45deg,
    var(--steel-gray) 0%,
    var(--mech-black) 100%
  );
  border: 2px solid var(--neon-cyan);
  position: relative;
  box-shadow: 0 0 15px rgba(0, 255, 157, 0.2);
}
h1::before {
  content: "⚙";
  margin-right: 1rem;
  animation: gear-spin 6s linear infinite;
}
@keyframes gear-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
pre {
  background: var(--steel-gray);
  padding: 1.5rem;
  border: 3px solid var(--metal-border);
  margin: 2rem 0;
  position: relative;
  overflow-x: auto;
}
pre::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    transparent 48%,
    var(--neon-cyan) 50%,
    transparent 52%
  );
  background-size: 300% 300%;
  animation: scan 8s linear infinite;
  z-index: -1;
}
@keyframes scan {
  0% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}
code {
  font-family: "Roboto Mono", monospace;
  color: var(--neon-cyan);
  background: rgba(0, 255, 157, 0.05);
  padding: 0.2em 0.4em;
  border: 1px solid var(--metal-border);
}
table {
  border-collapse: separate;
  border-spacing: 0;
  margin: 2rem 0;
  background: var(--steel-gray);
  border: 3px solid var(--metal-border);
  border-radius: 4px;
}
th {
  background: linear-gradient(var(--steel-gray), var(--mech-black));
  padding: 1.2rem;
  border-bottom: 3px solid var(--neon-cyan);
  position: relative;
}
th::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--hazard-orange);
  opacity: 0.6;
}
td {
  padding: 1rem;
  border-bottom: 1px solid var(--metal-border);
}
tr:hover {
  background: rgba(0, 255, 157, 0.02);
}
ul {
  list-style: none;
  padding-left: 2rem;
  border-left: 3px solid var(--neon-cyan);
}
ul li {
  padding: 0.5rem 1rem;
  position: relative;
}
ul li::before {
  content: "⇶";
  color: var(--hazard-orange);
  position: absolute;
  left: -1.8rem;
  animation: pipe-flow 2s infinite;
}
@keyframes pipe-flow {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
hr {
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--metal-border),
    var(--metal-border) 10px,
    var(--hazard-orange) 10px,
    var(--hazard-orange) 20px
  );
  border: none;
  margin: 3rem 0;
}
blockquote {
  background: linear-gradient(
    45deg,
    var(--steel-gray) 0%,
    var(--mech-black) 100%
  );
  border-left: 4px solid var(--rust-red);
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: inset 0 0 15px rgba(255, 61, 61, 0.1);
}
a {
  color: var(--neon-cyan);
  text-decoration: none;
  border-bottom: 2px solid var(--hazard-orange);
  transition: 0.3s;
}
a:hover {
  color: var(--hazard-orange);
  border-bottom-color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(255, 94, 26, 0.5);
}

科技感4


/* Holographic Interface Theme */
:root {
  --hologram-blue: #00f7ff;
  --neon-pink: #ff00ff;
  --matrix-green: #0fff50;
  --cyber-purple: #7d12ff;
  --void-black: #000112;
  --glow-white: rgba(255, 255, 255, 0.9);
}
body {
  font-family: "Exo 2", sans-serif;
  background: radial-gradient(
      circle at 50% 50%,
      rgba(0, 247, 255, 0.05) 0%,
      transparent 60%
    ),
    linear-gradient(45deg, var(--void-black) 0%, #000428 100%);
  color: var(--glow-white);
  line-height: 1.8;
  padding: 3rem;
  position: relative;
  overflow-x: hidden;
}
/* 动态网格背景 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background-image: linear-gradient(var(--hologram-blue) 1px, transparent 1px),
    linear-gradient(90deg, var(--hologram-blue) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.15;
  animation: gridMove 40s linear infinite;
  z-index: -1;
}
@keyframes gridMove {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-40px, -40px);
  }
}
/* 悬浮粒子 */
body::after {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle, var(--neon-pink) 0%, transparent 70%);
  filter: blur(60px);
  opacity: 0.1;
  animation: particleFloat 20s infinite alternate;
  z-index: -1;
}
@keyframes particleFloat {
  0% {
    transform: translate(30%, 10%) scale(1);
  }
  100% {
    transform: translate(-30%, -10%) scale(1.2);
  }
}
/* 全息标题 */
h1,
h2,
h3 {
  font-weight: 300;
  text-shadow: 0 0 15px var(--hologram-blue);
  position: relative;
  padding: 1rem 2rem;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 247, 255, 0.1) 50%,
    transparent 100%
  );
  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}
h1 {
  font-size: 3.5rem;
  color: var(--hologram-blue);
  animation: titleGlow 2s ease-in-out infinite alternate;
}
@keyframes titleGlow {
  from {
    text-shadow: 0 0 10px var(--hologram-blue);
  }
  to {
    text-shadow: 0 0 30px var(--hologram-blue);
  }
}
/* 数据流代码块 */
pre {
  background: rgba(0, 0, 40, 0.7);
  border-left: 3px solid var(--matrix-green);
  padding: 2rem;
  margin: 3rem 0;
  position: relative;
  overflow-x: auto;
  box-shadow: 0 0 50px rgba(15, 255, 80, 0.1);
}
pre::before {
  content: "◈ DATA STREAM ◈";
  position: absolute;
  top: -15px;
  left: 20px;
  color: var(--matrix-green);
  font-size: 0.8em;
  text-shadow: 0 0 10px currentColor;
}
code {
  font-family: "Source Code Pro", monospace;
  color: var(--matrix-green);
  background: transparent;
  padding: 0.2em 0.4em;
}
/* 霓虹图片框 */
img {
  border: 2px solid var(--neon-pink);
  background: rgba(255, 255, 255, 0.02);
  padding: 10px;
  margin: 2rem auto;
  width: 85%;
  display: block;
  position: relative;
  transition: 0.3s;
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.2),
    inset 0 0 15px rgba(255, 0, 255, 0.1);
}
img:hover {
  transform: scale(1.02) rotate(0.5deg);
  filter: hue-rotate(45deg);
}
/* 量子表格 */
table {
  border: 2px solid var(--cyber-purple);
  margin: 3rem 0;
  background: rgba(125, 18, 255, 0.05);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 5px;
  overflow: hidden;
}
th {
  background: linear-gradient(45deg, var(--cyber-purple) 0%, #4a00ff 100%);
  padding: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}
td {
  padding: 1.2rem;
  border-top: 1px solid rgba(125, 18, 255, 0.3);
}
/* 全息列表 */
ul {
  list-style: none;
  padding-left: 2rem;
}
ul li {
  padding: 0.8rem;
  position: relative;
}
ul li::before {
  content: "▶";
  color: var(--neon-pink);
  position: absolute;
  left: -1.5rem;
  animation: listPulse 1.5s infinite;
}
@keyframes listPulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
/* 响应式设计 */
@media (max-width: 768px) {
  body {
    padding: 1.5rem;
  }
  h1 {
    font-size: 2.5rem;
  }
  img {
    width: 95%;
  }
}

水墨风格1


/* Digital Ink Wash Theme v1.2 */
:root {
  --ink-black: #1a1a1a;
  --paper-white: #f5f5f5;
  --moss-green: #6b8e23;
  --cinnabar-red: #e34234;
  --mist-gray: #dcdcdc;
}
body {
  font-family: "Noto Serif SC", serif;
  background: linear-gradient(45deg, var(--paper-white) 0%, #f0eee4 100%);
  color: var(--ink-black);
  line-height: 1.6;
  padding: 2rem;
  position: relative;
}
/* 宣纸纹理 */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.03) 0px,
      rgba(0, 0, 0, 0.03) 1px,
      transparent 1px,
      transparent 5px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.03) 0px,
      rgba(0, 0, 0, 0.03) 1px,
      transparent 1px,
      transparent 5px
    );
  pointer-events: none;
  z-index: -1;
}
/* 水墨标题 */
h1,
h2,
h3 {
  font-family: "STKaiti", cursive;
  font-weight: 700;
  margin: 2rem 0;
  padding: 0.5rem 1rem;
  background: linear-gradient(90deg, var(--ink-black) 0%, transparent 100%);
  color: var(--paper-white);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  position: relative;
}
h1::after {
  content: "〆";
  color: var(--cinnabar-red);
  position: absolute;
  right: -1.5rem;
  top: -0.8rem;
  font-size: 2.5em;
}
/* 山水图片 */
img {
  border: 1px solid var(--ink-black);
  padding: 0.5rem;
  margin: 2rem auto;
  max-width: 80%;
  display: block;
  background: var(--paper-white);
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.1),
    -4px -4px 12px rgba(255, 255, 255, 0.8);
  transition: 0.3s;
  position: relative;
}
img:hover {
  transform: translateY(-5px) rotate(-0.5deg);
}
img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 48%,
    rgba(107, 142, 35, 0.1) 50%,
    transparent 52%
  );
  animation: inkFlow 6s infinite linear;
}
@keyframes inkFlow {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 200% 200%;
  }
}
/* 竹简代码块 */
pre {
  background: var(--paper-white);
  border: 2px solid var(--moss-green);
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: inset 0 0 20px rgba(107, 142, 35, 0.1),
    5px 5px 15px rgba(0, 0, 0, 0.1);
  position: relative;
}
pre::before {
  content: "〓";
  color: var(--moss-green);
  position: absolute;
  left: -1rem;
  top: -1.2rem;
  font-size: 2em;
}
code {
  font-family: "Noto Sans SC", sans-serif;
  color: var(--moss-green);
  background: rgba(107, 142, 35, 0.05);
  padding: 0.2em 0.4em;
}
/* 古籍表格 */
table {
  border-collapse: collapse;
  margin: 2rem 0;
  background: var(--paper-white);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
th,
td {
  padding: 1rem;
  border: 1px solid var(--mist-gray);
}
th {
  background: var(--moss-green);
  color: var(--paper-white);
  font-family: "STKaiti", cursive;
}
/* 卷轴引用 */
blockquote {
  background: var(--paper-white);
  border-left: 4px solid var(--cinnabar-red);
  padding: 2rem;
  margin: 2rem 0;
  position: relative;
}
blockquote::after {
  content: "〰";
  position: absolute;
  bottom: -1.5rem;
  right: 0;
  color: var(--cinnabar-red);
  font-size: 2em;
}
/* 修正后的毛笔分割线 */
hr {
  height: 6px;
  margin: 3rem 0;
  border: none;
  background: repeating-linear-gradient(
      90deg,
      transparent,
      transparent 15px,
      var(--ink-black) 15px,
      var(--ink-black) 30px
    ),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="6"><path d="M0 3 Q5 0,10 3 T20 3 T30 3" stroke="%231a1a1a" fill="none" stroke-width="2"/></svg>');
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.8;
  animation: brushStroke 0.8s linear infinite;
}
@keyframes brushStroke {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 30px;
  }
}
/* 响应式设计 */
@media (max-width: 768px) {
  body {
    padding: 1rem;
  }
  img {
    max-width: 95%;
  }
  hr {
    height: 4px;
    background-size: 20px 4px;
  }
}

喜羊羊动画风格


/* Happy Farm Theme Final v2.0 */
:root {
  --sun-yellow: #ffe600;
  --grass-green: #8bc34a;
  --cloud-white: #f8f9fa;
  --barn-red: #ff5722;
  --character-blue: #2196f3;
}
/* 核心容器系统 */
body {
  font-family: "Comic Sans MS", "幼圆", cursive;
  background: linear-gradient(180deg, #87ceeb 30%, var(--grass-green) 100%);
  color: #4a4a4a;
  line-height: 1.5;
  padding: 20px;
  position: relative;
  overflow-x: hidden;
  width: 100%;
  min-width: 320px;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}
/* 动态云朵系统 */
body::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 60px;
  background: var(--cloud-white);
  border-radius: 20px;
  box-shadow: 60px 30px 0 -10px var(--cloud-white),
    120px 15px 0 -5px var(--cloud-white);
  animation: cloudMove 20s linear infinite;
  opacity: 0.8;
  left: -200px;
  top: 20%;
  max-width: calc(100% + 200px);
}
@keyframes cloudMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(100vw + 200px));
  }
}
/* 太阳系统 */
#sun {
  position: absolute;
  top: 20px;
  right: clamp(20px, 3vw, 50px);
  width: 50px;
  height: 50px;
  background: var(--sun-yellow);
  border-radius: 50%;
  animation: sunRotate 10s linear infinite;
  z-index: 1;
}
@keyframes sunRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* 标题系统 */
h1,
h2,
h3 {
  color: var(--barn-red);
  text-shadow: 2px 2px 0 white, -2px -2px 0 white;
  margin: 1em 0;
  position: relative;
}
h1 {
  font-size: 2.5em;
  transform: rotate(-3deg);
}
h1::after {
  content: "🐑";
  position: absolute;
  right: -0.5em;
  top: -0.3em;
  font-size: 1.2em;
}
/* 按钮系统 */
button {
  background: var(--sun-yellow);
  border: 3px solid white;
  border-radius: 15px;
  padding: 10px 20px;
  font-size: 1.2em;
  color: var(--barn-red);
  cursor: pointer;
  transition: all 0.2s;
}
button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
/* 图片系统 */
img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  margin: 1em auto;
  border: 5px solid white;
  border-radius: 20px;
  box-shadow: 5px 5px 0 var(--sun-yellow);
  box-sizing: border-box;
  transition: transform 0.3s;
}
img:hover {
  transform: rotate(3deg) scale(1.05);
}
/* 代码块系统 */
pre {
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid var(--character-blue);
  border-radius: 15px;
  padding: 1.5rem;
  margin: 2rem 0;
  position: relative;
  overflow-x: auto;
  box-shadow: 5px 5px 0 var(--sun-yellow);
}
pre::before {
  content: "💻";
  position: absolute;
  left: -15px;
  top: -15px;
  font-size: 1.5em;
  text-shadow: 2px 2px 0 white;
}
code {
  font-family: "Courier New", monospace;
  color: var(--barn-red);
  background: rgba(255, 87, 34, 0.1);
  padding: 0.2em 0.4em;
  border-radius: 3px;
}
/* 表格系统 */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2rem 0;
  background: white;
  border-radius: 15px;
  box-shadow: 5px 5px 0 var(--sun-yellow);
  overflow: hidden;
}
th {
  background: var(--grass-green);
  color: white;
  padding: 1rem;
  text-align: left;
  position: relative;
}
th::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--barn-red);
}
td {
  padding: 1rem;
  border-bottom: 2px solid var(--cloud-white);
}
tr:nth-child(even) {
  background: rgba(139, 195, 74, 0.1);
}
tr:hover {
  background: rgba(255, 230, 0, 0.2);
}
/* 列表系统 */
ol,
ul {
  list-style: none;
  padding-left: 2em;
  margin: 1.5rem 0;
}
ol {
  counter-reset: farm-counter;
}
ol li {
  counter-increment: farm-counter;
  margin: 0.8rem 0;
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  position: relative;
}
ol li::before {
  content: counter(farm-counter);
  position: absolute;
  left: -1.8em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5em;
  height: 1.5em;
  background: var(--barn-red);
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 1.5em;
  font-weight: bold;
  box-shadow: 2px 2px 0 white;
}
ul li {
  padding: 0.8rem 1rem;
  margin: 0.8rem 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  position: relative;
  transition: transform 0.3s;
}
ul li::before {
  content: "🌱";
  position: absolute;
  left: -1.5em;
  top: 0.6em;
  font-size: 1.2em;
  animation: leafBounce 1s infinite;
}
@keyframes leafBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
/* 引用系统 */
blockquote {
  background: linear-gradient(45deg, white 0%, #f8fff8 100%),
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M0 50 Q50 0 100 50 L50 50 L0 50" fill="%238bc34a" opacity="0.1"/></svg>');
  padding: 2rem;
  margin: 2rem 0;
  border-left: 5px solid var(--grass-green);
  border-radius: 15px;
  position: relative;
  box-shadow: 5px 5px 0 rgba(139, 195, 74, 0.2);
}
blockquote::before,
blockquote::after {
  color: var(--barn-red);
  font-size: 4em;
  font-family: "Comic Sans MS", cursive;
  text-shadow: 2px 2px 0 white;
  position: absolute;
}
blockquote::before {
  content: "“";
  left: -0.5em;
  top: -0.5em;
}
blockquote::after {
  content: "”";
  right: -0.5em;
  bottom: -0.5em;
  text-shadow: -2px -2px 0 white;
}
/* 响应式系统 */
@media (max-width: 1200px) {
  body {
    padding: 20px 15px;
  }
}
@media (max-width: 768px) {
  body {
    padding: 15px 10px;
    min-width: 300px;
  }
  #sun {
    width: 40px;
    height: 40px;
    right: 10px;
  }
  body::before {
    animation-duration: 25s;
    top: 15%;
  }
  pre {
    padding: 1rem;
  }
}
@media (max-width: 480px) {
  h1 {
    font-size: 1.8em;
    transform: rotate(-2deg);
  }
  blockquote {
    padding: 1.5rem;
    margin: 1.5rem 0;
  }
  ol li::before,
  ul li::before {
    font-size: 0.9em;
  }
}