javascript - 如何为图像背后的东西设置动画？

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        5个月前关闭。
                                                                                            
                
        
我正在做作业，它正在使用html，css和javascript创建一个简单的网页。我正在练习使用CSS制作动画，在link上发现了一些很棒的东西，这使某些东西移到了图像后面。

Here's the thing it's moving behind Team Logo

现在，我尝试使用源页面来查找他们如何对其进行动画处理，但是由于我仍在学习中，因此仍然无法理解它。根据我的解释是否有任何示例？

最佳答案

我是根据this答案来做的。因此，我将您的问题标记为重复。太酷了，我无法抗拒。

.hi {
  width: 84px;
  height: 84px;
  background-image: url("https://thunderpick.com/assets/img/bolt/bolt.png");
  position: relative;
  border: solid 1px black;
  animation: playv 1s steps(21) infinite, playh 0.0476s steps(3) infinite;
}

@keyframes playv {
  0% {
    background-position-y: 0px;
  }
  100% {
    background-position-y: -1764px;
  }
}

@keyframes playh {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: -252px;
  }
}

<div style="background-color: black; width: 86px">
  <div class='hi'>
  </div>
</div>