用css创建无限循环答案

【问题标题】：Create infinite loop with css用css创建无限循环
【发布时间】：2020-02-24 05:32:33
【问题描述】：

我有一张大约占据屏幕底部三分之一的波浪图像（不是背景图像），我想在从右到左的无限循环上运行但使用 css。我尝试了不同的方法，但到目前为止都无法使其发挥作用。

我已经在 HTML 上定义了 img src，但如果需要我可以在 css 文件上进行。

感谢任何有关如何操作的帮助或建议。

CSS

body {
    border: 2px solid black;
    width: 700px;
    background-image: url("./cave.jpg");
    background-size: 700px 505px;
    background-repeat: no-repeat;
    background-position: 10px 10px;
}

.waves {
    height: 380px;
    width: 700px;
    position: relative;
    top: -300px;
    background-repeat: repeat-x;
    animation: animatedImage 20s linear infinite;
}

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

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Escape the Cave</title>
    <link rel="stylesheet" href="./jogo.css">
  </head>
  <body>
    <div>
     <img class="waves" src="./ondas.png">

      </div>
    <script src="jogo.js"></script>
  </body>
</html>

【问题讨论】：

<img /> 元素的图像与 background-image 不同，您不能像使用 CSS 属性那样为 <img /> 元素设置动画。

标签： html css image loops infinite-loop

【解决方案1】：

我在放置图像的 div 上移动了类“waves”，因为它更易于操作。这是CSS

body {
border: 2px solid black;
width: 700px;
background-image: url("./cave.jpg");
background-size: 700px 505px;
background-repeat: no-repeat;
background-position: 10px 10px;
}

.waves {
height: 380px;
width: 700px;
position: relative;
top: -300px;
background-repeat: repeat-x;
animation: animatedImage 5s linear infinite;
}

@keyframes animatedImage {
    0% { left: 0;}
    50%{ left : 100%;}
    100%{ left: 0;}
}



HTML

<div class="waves">
 <img  src="https://styles.redditmedia.com/t5_2tugi/styles/communityIcon_7yzrvmem0wi31.png">
</div>

【讨论】：