---

{dotted startColor="#ff6c6c" endColor="#1989fa"/}

Joe主题教程（仅适用于Joe主题，其他主题请根据实际情况调整）

0.0.1 准备工作

找到并打开站点目录中的 /usr/themes/Joe/assets/css/joe.mode.css 文件。

1.0.0 修改源码

更新 html {} 样式

1. 将 --background: #fff; 修改为 --background: rgba(255, 255, 255, 0.8);

2. 添加以下代码：

   /* 背景动效实现逻辑 */
   --gradation: linear-gradient(270deg, #a8e6cf, #dcedc1, #ffd3b6, #ffaaa5, #ff8b94);

更新 html[data-night='night'] body {} 样式

1. 添加：

   --gradation: #323335;

1.1.0 完成初步修改

保存并关闭文件。

{message type="info" content="如果修改后不生效，请编辑 /usr/themes/Joe/module/head.php 文件，找到 assets/css/joe.mode.css，在路径后加上一个问号，例如：assets/css/joe.mode.css?。"/}

{dotted startColor="#ff6c6c" endColor="#1989fa"/}

2.0.0 自定义CSS设置

1. 打开主题设置。
2. 找到插入代码的选项。

3. 添加以下自定义CSS：

   @keyframes GradientAnimation {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }
   
    body {
        font-family: 'Arial', sans-serif;
        background: var(--gradation);
        background-size: 1000% 1000%;
        animation: GradientAnimation 15s ease infinite;
    }

4. 保存设置，200 OK。

{lamp/}

3.0.0 完成

一切设置完毕！ ::(酷)

---