fix: set logo background opaque when fade in

[ChangeSuger]

#823

基本上已经在 issue 中把改动点说明了，这里直接复制黏贴一下。

---

在切换最后一张 Logo 图片（如果有复数的话）的渐入过程中，能隐约看到主页面，这应该是不符合预期的。直接使用本仓库的模板就能直接复现这个问题。

下面有一个演示目前问题的 gif，如果加载不出来可以点击链接下载查看。

从渐入渐出的实现上看，在 Logo 图片渐入的过程中，白底背景就开始渐出，使得在 0% ～ 35% 这段动画中，会有一小段时间 Logo 层是半透明的，可以隐约看到主页面。

@keyframes change-img-anim {
  0%{
    opacity: 0;
  }
  35%{
    opacity: 1;
  }
  65%{
    opacity: 1;
  }
  99%{
    opacity: 0;
  }
  100%{
    opacity: 0;
    display: none;
  }
}

@keyframes fadeout {
  0%{
    opacity: 1;
  }
  99%{
    opacity: 0;
  }
  100%{
    opacity: 0;
    display: none;
  }
}

我的想法是让白底背景在 Logo 图片渐入的过程中保持不透明，不知道这样修复是否合适。

@keyframes change-img-anim {
  0%{
    opacity: 0;
  }
  35%{
    opacity: 1;
  }
  65%{
    opacity: 1;
  }
  99%{
    opacity: 0;
  }
  100%{
    opacity: 0;
    display: none;
  }
}

@keyframes fadeout {
  0%{
    opacity: 1;
  }
+  65%{
+    opacity: 1;
+  }
  99%{
    opacity: 0;
  }
  100%{
    opacity: 0;
    display: none;
  }
}

下面有一个演示修复后效果的 gif，如果加载不出来可以点击链接下载查看。

[gemini-code-assist]

Summary of Changes

Hello @ChangeSuger, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求旨在解决一个用户界面上的视觉瑕疵，即在应用程序启动时，Logo 动画播放期间，背景会短暂地变得半透明，导致主页面内容可见。通过精确调整 CSS 关键帧动画，本 PR 确保了 Logo 背景在整个渐入过程中始终保持完全不透明，从而提供更流畅、更专业的启动体验。

Highlights

• 修复 Logo 动画透底问题: 解决了在 Logo 渐入过程中，主页面会短暂透出的视觉问题，提升了用户体验。
• 优化背景渐出动画: 通过调整 fadeout 关键帧动画，确保 Logo 背景在 Logo 渐入期间保持不透明，避免了内容泄露。

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

你好，感谢你的贡献！这个改动很棒，通过延迟背景的淡出动画，成功解决了在 Logo 切换时主页面会提前透出的问题。你的问题描述清晰，GIF 演示也很有帮助。

我在代码中留下一条建议，关于如何通过使用 SCSS 变量来提高动画代码的可维护性，使不同动画之间的时间同步关系更加明确。这只是一个可选的优化建议，你当前的修复已经很好地解决了问题。

[gemini-code-assist]

这个修复是正确的，它解决了背景过早淡出的问题。

为了提高代码的可维护性，并使两个动画（change-img-anim 和 fadeout）之间的时间关系更明确，建议将关键的时间点（如 65%）提取为 SCSS 变量。这样，如果将来需要调整动画时间，只需修改变量即可，可以避免不同步的问题。

例如，可以这样做：

$logo-visible-end: 65%;

@keyframes change-img-anim {
  /* ... */
  #{$logo-visible-end} {
    opacity: 1;
  }
  /* ... */
}

@keyframes fadeout {
  /* ... */
  #{$logo-visible-end} {
    opacity: 1;
  }
  /* ... */
}

这只是一个关于代码可维护性的建议，当前实现的功能是完全正确的。