# 如何更改 Discourse 启动动画？

**URL:** <https://meta.discourse.org/t/how-to-change-discourse-splash-animation/234251>\
**Category:** Support\
**Tags:** splash\
**Created:** [2022年七月28日 10:06 UTC](https://meta.discourse.org/t/how-to-change-discourse-splash-animation/234251 "2022-07-28T10:06:50Z")\
**Posts on this page:** 1\
**Showing post:** 9

<div class="post-metadata">

**Author:** ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)\
**Post date:** [2025年八月4日 13:04 UTC](https://meta.discourse.org/t/how-to-change-discourse-splash-animation/234251/9 "2025-08-04T13:04:31Z")

</div>

您无法直接从主题中编辑 ERB 启动模板，并且由于启动加载早于核心 CSS/JS，因此自定义起来很棘手。

您在主题的常规 CSS/SCSS 选项卡中编写的 CSS 会在启动加载器显示 **之后** 进行编译和加载。因此，即使您的 CSS 在那里有效，原始的点在加载时也会短暂出现。

话虽如此，您可以通过在主题的 **`head_tag`** 中注入内联 CSS 来覆盖启动动画。这可确保您的样式立即生效，从而避免默认的点闪烁。

下面是一个示例，它用类似于您在 Codepen 中的 _Pulser_ 效果替换了默认的点动画：

```html
<style>
  :root {
    --pulser-color-1: #ffcc00;
    --pulser-color-2: #ff6347;
  }
  #d-splash .dots {
    all: unset;
    position: absolute;
    width: 1.6em;
    height: 1.6em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #d-splash .dots[style*="--n:-2"] { transform: translate(-300%, -50%); }
  #d-splash .dots[style*="--n:-1"] { transform: translate(-150%, -50%); }
  #d-splash .dots[style*="--n:0"] { transform: translate(0%, -50%); }
  #d-splash .dots[style*="--n:1"] { transform: translate(150%, -50%); }
  #d-splash .dots[style*="--n:2"] { transform: translate(300%, -50%); }
  #d-splash .dots::before,
  #d-splash .dots::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--pulser-color-1);
    top: 0;
    left: 0;
    opacity: 0;
    animation: pulse 1s ease-out infinite;
  }
  #d-splash .dots::before {
    border-color: var(--pulser-color-2);
    animation-delay: 0.3s;
  }
  @keyframes pulse {
    0% {
      transform: scale(0.5);
      opacity: 0.6;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.3;
    }
    100% {
      transform: scale(1.8);
      opacity: 0;
    }
  }
</style>

```

请注意：_浏览器 **无法** 在 `<style>` 标签中解析 SCSS。因此，您不能简单地将 SCSS 内联。您必须使用 CSS 而不是 SCSS。_

结果：

![pulsereffect](https://global.discourse-cdn.com/meta/original/4X/7/a/5/7a5afa437f7bef5846839ab954020d90a1240c15.gif)

您需要 [创建一个新的主题组件](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#p-446224-create-new-themes-and-theme-components-7)，点击“编辑代码”，进入“Head”标签并粘贴上面的 `<style>` 块。

保存并硬重新加载您的站点，即可立即在启动时看到更新的脉冲动画。

这是 Discourse 在计划中的 v2 更新中实现更可自定义的启动屏幕之前的一种巧妙的解决方法。

---

_[View the full topic](https://meta.discourse.org/t/how-to-change-discourse-splash-animation/234251)._