时间戳

首页 > 解决方案 > CSS 动画在 Github wiki 页面中不起作用

html - CSS 动画在 Github wiki 页面中不起作用

问题描述

我正在尝试在 Github 上为这个项目编写 wiki。我希望 wiki 包含 CSS 动画，但没有动画出现在 wiki 页面上。

当我使用 Visual Studio Code 编辑 Markdown 源时，动画效果在 Markdown 预览窗口中看起来很棒。但由于某种原因，它们并没有出现在实际的 Github wiki 网页上，这对我来说这可能是 Github 与 CSS 动画兼容性的一些更深层次的问题

以下是样式表的相关部分：

canvas {
    width: 300px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;

    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 0.5s;

    animation-iteration-count: infinite;
    animation-duration: 0.5s;
}

.dash {
    -webkit-animation-name: dash;
    -webkit-animation-duration: 2s;
    animation-name: dash;
    animation-duration: 2s;
}

@-webkit-keyframes dash {
    0%      { background: url(dashAnimation/frame1.png); }
    29%     { background: url(dashAnimation/frame1.png); }

    30%     { background: url(dashAnimation/frame2.png); }
    59%     { background: url(dashAnimation/frame2.png); }

    60%     { background: url(dashAnimation/frame3.png); }
    79%     { background: url(dashAnimation/frame3.png); }

    80%     { background: url(dashAnimation/frame4.png); }
    85%     { background: url(dashAnimation/frame5.png); }
    90%     { background: url(dashAnimation/frame6.png); }
    100%    { background: url(dashAnimation/frame7.png); }
}

@keyframes dash {
    0%      { background: url(dashAnimation/frame1.png); }
    29%     { background: url(dashAnimation/frame1.png); }

    30%     { background: url(dashAnimation/frame2.png); }
    59%     { background: url(dashAnimation/frame2.png); }

    60%     { background: url(dashAnimation/frame3.png); }
    79%     { background: url(dashAnimation/frame3.png); }

    80%     { background: url(dashAnimation/frame4.png); }
    85%     { background: url(dashAnimation/frame5.png); }
    90%     { background: url(dashAnimation/frame6.png); }
    100%    { background: url(dashAnimation/frame7.png); }
}

这是应该显示在“播放器”wiki 页面上的实际降价源代码：

<link href="resources/style.css" rel="stylesheet" type="text/css" />
<canvas class="dash"></canvas>

最后，这里是实际 wiki 页面的链接。如您所见，网页完全没有显示任何内容。但是应该有一个有趣的小动画播放，因为<canvas>markdown源文件中的标签

其基本思想是将不同的.classHTML 属性附加到不同的动画上，然后只需更改标签的class="class-name"属性<canvas>即可更改显示的动画。这个策略在 Visual Studio Code 的 Markdown 预览窗口中效果很好，但没有出现在 Github wiki 中

标签： htmlcssgithubmarkdowncss-animations

解决方案

出于安全原因，这永远不会在 GitHub.com 上运行。

Github 的 HTML sanitizer 去除了<link>和<canvas>标签。如果您使用浏览器的“查看源代码”或“检查”工具，您可以看到包装<div>完全是空的。从该页面的 HTML 源代码的第 957 行开始，我们发现：

<div id="wiki-body" class="mt-4 flex-auto min-width-0 gollum-markdown-content instapaper_body">
    <div class="markdown-body">


    </div>

</div>

请注意，内部<div>完全是空的，根本没有内容。为了比较，您 wiki 中其他页面的 HTML 源代码的相同部分如下所示：

<div id="wiki-body" class="mt-4 flex-auto min-width-0 gollum-markdown-content instapaper_body">
    <div class="markdown-body">
      <p>Welcome to the Flight wiki!</p>
<p>Here, you will find a formal description of the mechanics of the game, as well as some ideas about putting those mechanics together into challenging and compelling level designs.</p>

    </div>

</div>

显然，您的 Markdown 内容的 HTML 输出包含在<div>. 所以，我们知道我们正在寻找正确的位置。

这可以在 GitHub 发布他们的标记处理代码时得到验证。对于初学者，github/markup的 README将 HTML 卫生列为 5 步过程中的第 2 步。以前，该步骤链接到此 sanitizer的源代码。但是，最近该链接已被删除。如果他们使用的是新的和不同的东西，可能会比旧的更严格。

无论如何，查看旧 sanitizer 的源代码，很明显，在允许标签的白名单中既不包含标签，<link>也不<canvas>包含标签，因此它们将从文档中完全删除。这是有道理的，因为这两种类型的标签都可以用来在 GitHub 的网站上运行第三方代码，这将是一个严重的安全漏洞。

如果您想发布这样的内容，您需要在您可以完全控制的网站上发布。如果您想坚持使用 GitHub，您可能希望将 GitHub Pages 视为一个选项。

推荐阅读