Jquery 响应Spritesheet动画问题_Jquery_Html_Css

Jquery 响应Spritesheet动画问题

jquery html css

Jquery 响应Spritesheet动画问题,jquery,html,css,Jquery,Html,Css,我遵循以下教程链接，只要我使用相同的图像，它就可以正常工作，只要我替换图像，它的动画就会突然出现（从上到下滑动） [https://codepen.io/SitePoint/pen/zxXrzP][1] [https://i.stack.imgur.com/71Alo.png][2] 页面标题身体{ 填充：20px；文本对齐：居中； } .家长{ 位置：相对位置；宽度：70%；保证金：-10%自动0自动；/*定位调整*/ } .家长：以前{ 内容：“；显示：块；垫面：61.37%；

我遵循以下教程链接，只要我使用相同的图像，它就可以正常工作，只要我替换图像，它的动画就会突然出现（从上到下滑动）

[https://codepen.io/SitePoint/pen/zxXrzP][1]
[https://i.stack.imgur.com/71Alo.png][2]
页面标题
身体{
填充：20px；
文本对齐：居中；
}
.家长{
位置：相对位置；
宽度：70%；
保证金：-10%自动0自动；/*定位调整*/
}
.家长：以前{
内容：“；
显示：块；
垫面：61.37%；
}
吕先生{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
背景：url（'cows.png'）不重复0%；
背景大小：100%；
动画：精灵3.5步（45步）无限；
}
@关键帧精灵{
从{背景位置：0%；}
到{背景位置：0 100%；}
}
h1{
字体大小：1.2米；
}
p{
边缘顶部：120px；
字体大小：14px；
}
演示2：响应精灵动画
一个反应灵敏的纯CSS循环精灵动画，其流体宽度为视口的70%。调整窗口大小
汤姆·班纳特的演示

谢谢，

fa12ms0013

在不知道cows.png文件的情况下，我只能猜测。
在原始文章中，动画是专门为文件

https://www.bennet.org/images/codepen/ryu-sprite-demo.png

如果更改文件，可能必须更改动画步骤（代码中有45个步骤）以适应新文件。

在不知道文件cows.png的情况下，我只能猜测。
在原始文章中，动画是专门为文件

https://www.bennet.org/images/codepen/ryu-sprite-demo.png

如果更改文件，您可能必须更改动画步骤（代码中有45个步骤）以适应新文件。

不要依赖外部链接，它们可能明天就会消失。相反，发布你的代码并询问关于代码的问题，而不是“以下教程”。我已经编辑了我的html和css，现在对你有帮助吗？当我用cow替换ryu图像，然后它开始出现故障时，也可以使用本教程。不要依赖外部链接-它们可能明天就会消失。相反，发布你的代码并询问关于代码的问题，而不是“以下教程”。我已经编辑了我的html和css，现在对你有帮助吗？当我用cow替换ryu图像，然后它开始出现故障时，本教程也在上提供。

[https://codepen.io/SitePoint/pen/zxXrzP][1]

[https://i.stack.imgur.com/71Alo.png][2]

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
  padding: 20px;
  text-align: center;
}

.parent {
  position: relative;
  width: 70%;
  margin: -10% auto 0 auto; /* positioning tweak */
}

.parent:before {
  content: "";
  display: block;
  padding-top: 61.37%; 
}

.ryu {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  background:  url('cows.png') no-repeat 0 0%;
  background-size: 100%;
  animation: sprite 3.5s steps(45) infinite;
}

@keyframes sprite {
  from { background-position: 0 0%; }
  to { background-position: 0 100%; }
}

h1 {
  font-size: 1.2em;
}

.p {
  margin-top: 120px;
  font-size: 14px;
}
</style>
</head>
<body>

<h1>Demo 2: Responsive Sprites Animation</h1>

<p>A responsive, pure-CSS, looping sprite animation with a fluid width of 70% of the viewport. Resize the window!</p>

<div class="parent">
  <div class="ryu"></div>
</div>

<p class="p">Demo by Tom Bennet. <a href="http://www.sitepoint.com/responsive-sprite-animations-imagemagick-greensock" target="_blank">See article</a>.</p>