如何让这个带有背景图像的 CSS 动画在这个 Markdown 文件中工作？答案

【问题标题】：How do I get this CSS animation with background images to work in this Markdown file?如何让这个带有背景图像的 CSS 动画在这个 Markdown 文件中工作？
【发布时间】：2020-02-23 06:28:29
【问题描述】：

我想通过使用 css 中的 @keyframes 规则随时间更改背景图像来为 <canvas> 设置动画。我无法让动画工作。我什至无法让<canvas> 标签显示单个静态图像。有人可以检查我的代码，看看我哪里出错了吗？

我试过了：

在纯 HTML 文件中测试相同的代码
使用“.jpg”图像文件而不是“.png”
没有为画布标签使用单独的类。所以在这段代码中，我写了<canvas class="jump-animation"></canvas>，但我也尝试将动画样式放在画布标签中并使用<canvas></canvas>，但这也不起作用

这是降价文件：

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

<h1>HELLO?!</h1>
<canvas class="jump-animation"></canvas>

这是样式表：

canvas {
    width: 500px;
    height: 500px;
    background-size: contain;

    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.jump-animation {
    -webkit-animation-name: jump;
    -webkit-animation-duration: 7s;

    animation-name: jump;
    animation-duration: 7s;
}

@-webkit-keyframes jump {
    0%      { background: url(resources/jumpAnimation/frame1.png); }
    14%     { background: url(resources/jumpAnimation/frame2.png); }
    28%     { background: url(resources/jumpAnimation/frame3.png); }
    42%     { background: url(resources/jumpAnimation/frame4.png); }
    56%     { background: url(resources/jumpAnimation/frame5.png); }
    80%     { background: url(resources/jumpAnimation/frame6.png); }
    100%    { background: url(resources/jumpAnimation/frame7.png); }
}

@keyframes jump {
    0%      { background: url(resources/jumpAnimation/frame1.png); }
    14%     { background: url(resources/jumpAnimation/frame2.png); }
    28%     { background: url(resources/jumpAnimation/frame3.png); }
    42%     { background: url(resources/jumpAnimation/frame4.png); }
    56%     { background: url(resources/jumpAnimation/frame5.png); }
    80%     { background: url(resources/jumpAnimation/frame6.png); }
    100%    { background: url(resources/jumpAnimation/frame7.png); }
}

h1 {
    color: white;
}

带有“HELLO?!”字样的标题只是为了测试样式表是否正确链接，它是。如果我更改样式表中 h1 标记的颜色，markdown 文件会响应更改。但是我为<canvas> 标签所做的一切似乎都不起作用

这也说明我什至无法让<canvas> 标记在 Markdown 或 HTML 中显示背景的 static 图像，这表明我这里有更大的东西我失踪了

例如，在样式表中，我尝试了：

canvas {
    width: 500px;
    height: 500px;
    background-size: contain;
    background: url(resources/jumpAnimation/frame1.png);
}

这对<canvas> 标签的显示完全没有影响。还是空的

【问题讨论】：

标签： html image canvas markdown css-animations

【解决方案1】：

天哪

style.css 样式表在“resources”文件夹中。这意味着前面带有“resources/”的所有 url 都是不正确的。我需要从所有图像链接前面删除所有“资源/”部分。一旦我这样做了，所有图像都正确加载了

感谢您让我发布这个问题，即使这是一个微不足道的问题；）

【讨论】：