AI摘要：文章摘要：本文介绍了如何为Joe主题添加动态背景。首先，找到并打开站点目录中的`/usr/themes/Joe/assets/css/joe.mode.css`文件进行准备工作。接着，更新`html {}`样式，将`--background: #fff;`修改为`--background: rgba(255, 255, 255, 0.8);`，并添加了实现背景动效的代码。然后，更新`html[data-night=\'night\'] body {}`样式，添加了新的渐变颜色。最后，完成初步修改后保存并关闭文件。在主题设置中，可以找到插入代码的选项，添加自定义CSS设置，包括一个名为`GradientAnimation`的动画和设置背景颜色、大小以及动画效果。

Powered by AISummary.

{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 完成

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