Question

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

[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

Answer 1

我不知道文件cows.png我只能猜测在原始文章中，动画是专门为文件https://www.bennet.org/images/codepen/ryu-sprite-demo.png编写的如果更改文件，则可能需要更改动画步骤（代码中为45）以适合新文件。

响应式Spritesheet动画问题

1 个答案: