Mermaid 功能测试

这是一个简单的流程图测试：

graph TD;
    A[开始部署] --> B{配置完毕?};
    B -- 是 --> C[发布第一篇博客];
    B -- 否 --> D[检查 D1 绑定];
    C --> E[成功渲染 Mermaid 图表!];

这是一个简单的流程图测试2：

sequenceDiagram
    autonumber
    participant Bob as Bob (发送者)
    participant Network as 公共网络 (不安全)
    participant Alice as Alice (接收者)
    Note over Alice: 1. Alice 生成密钥对
    Alice->>Alice: 生成 (公钥 PublicA, 私钥 PrivateA)
    
    Note over Bob, Alice: 2. 交换公钥
    Alice->>Bob: 发送 公钥 PublicA
    Bob->>Bob: 收到并保存 Alice 的公钥
    Note over Bob, Alice: 3. 加密发送
    Bob->>Bob: 准备明文消息 "Hello Alice"
    Bob->>Bob: 用 PublicA 加密消息 -> 密文 #@$!
    Bob->>Network: 发送密文 #@$!
    Network->>Alice: 转发密文 #@$!
    Note over Bob, Alice: 4. 解密读取
    Alice->>Alice: 用 PrivateA 解密密文 #@$!
    Alice-->>Alice: 还原出明文 "Hello Alice"
    Note right of Network: 黑客即使截获密文 #@$!由于没有 PrivateA，无法解密

这是一个图片上传测试：

测试

✨ Interactive JS Demo

{
    // 使用 {} 包裹代码是为了防止变量重复定义报错
    const ball = document.getElementById('my-ball');
    let pos = 0;
    let direction = 1;

    // 定义动画函数
    function step() {
        // 如果元素已经被移除（比如被新的渲染替换了），停止动画
        if (!document.getElementById('my-ball')) return;

        pos += 2 * direction;
        if (pos > 300 || pos < 0) direction *= -1;
        
        ball.style.left = pos + 'px';
        requestAnimationFrame(step);
    }
    
    // 启动动画
    step();
}

{
    // 使用 {} 包裹代码是为了防止变量重复定义报错
    const ball = document.getElementById('my-ball');
    let pos = 0;
    let direction = 1;

    // 定义动画函数
    function step() {
        // 如果元素已经被移除（比如被新的渲染替换了），停止动画
        if (!document.getElementById('my-ball')) return;

        pos += 2 * direction;
        if (pos > 300 || pos < 0) direction *= -1;
        
        ball.style.left = pos + 'px';
        requestAnimationFrame(step);
    }
    
    // 启动动画
    step();
}

CSS测试1

<style>
  /* 容器定位 */
  .pulse-container {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 核心圆点 */
  .pulse-core {
    width: 20px;
    height: 20px;
    background-color: #6750a4;
    border-radius: 50%;
    z-index: 10;
    position: relative;
  }

  /* 波纹圆圈 */
  .pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(103, 80, 164, 0.6);
    opacity: 0;
    animation: ripple 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  }

  /* 让两个波纹错开时间播放，制造连续感 */
  .pulse-ring:nth-child(2) {
    animation-delay: 0s;
  }
  .pulse-ring:nth-child(3) {
    animation-delay: 1s; /* 延迟1秒 */
  }

  /* 核心动画定义 */
  @keyframes ripple {
    0% {
      transform: scale(0.3); /* 从核心大小开始 */
      opacity: 0.8;
    }
    100% {
      transform: scale(1.5); /* 扩散到1.5倍大 */
      opacity: 0; /* 慢慢消失 */
    }
  }
</style>

<div class="pulse-container">
  <!-- 两个波纹层 -->
  <div class="pulse-ring"></div>
  <div class="pulse-ring"></div>
  <!-- 中心实心点 -->
  <div class="pulse-core"></div>
</div>

CSS测试2