Html 使用css创建无限循环_Html_Css_Image_Loops_Infinite Loop

Html 使用css创建无限循环

html css image loops

Html 使用css创建无限循环,html,css,image,loops,infinite-loop,Html,Css,Image,Loops,Infinite Loop,我有一个波浪图像，占据了屏幕底部三分之一的位置（不是背景图像），我想在一个从右到左的无限循环中运行，但使用css。我尝试过不同的方法，但到目前为止都无法成功我已经在HTML上定义了IMGSRC，但如果需要，我可以在css文件上定义任何关于如何做的帮助或建议都将不胜感激 CSS HTML 逃离洞穴我将类“waves”移动到放置图像的div上，因为它更易于操作。这是CSS body { border: 2px solid black; width: 700px; background-im

我有一个波浪图像，占据了屏幕底部三分之一的位置（不是背景图像），我想在一个从右到左的无限循环中运行，但使用css。我尝试过不同的方法，但到目前为止都无法成功

我已经在HTML上定义了IMGSRC，但如果需要，我可以在css文件上定义

任何关于如何做的帮助或建议都将不胜感激

CSS

HTML


逃离洞穴

我将类“waves”移动到放置图像的div上，因为它更易于操作。这是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>

正文{
边框：2件纯黑；
宽度：700px；
背景图片：url（“./cave.jpg”）；
背景尺寸：700px 505px；
背景重复：无重复；
背景位置：10px 10px；
}
.波浪{
高度：380px；
宽度：700px；
位置：相对位置；
顶部：-300px；
背景重复：重复-x；
动画：动画图像5s线性无限；
}
@关键帧动画图像{
0%{左：0；}
50%{左：100%；}
100%{左：0；}
}
HTML

元素的图像与

背景图像不同，您无法使用CSS属性以相同的方式设置元素的动画。
<!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>

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>