问响应式Spritesheet动画问题
EN

Stack Overflow用户

提问于 2017-04-16 18:09:18

回答 1查看 52关注 0票数 1

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

[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>

谢谢，fa12ms0013

jquery

html

css

回答 1

Stack Overflow用户

发布于 2017-04-16 18:40:28

如果不知道文件cows.png，我只能猜测。

在最初的文章中，动画是专门为文件https://www.bennet.org/images/codepen/ryu-sprite-demo.png编写的。

如果更改文件，则可能必须更改动画步长(代码中为45步)以适应新文件。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43436061

复制

相似问题

问响应式Spritesheet动画问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应式Spritesheet动画问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问响应式Spritesheet动画问题
EN