Создать бесконечный цикл с помощью CSS - PullRequest
Новая
       46

Создать бесконечный цикл с помощью CSS

0 голосов
/ 29 октября 2019

У меня есть изображение волн, которое занимает около нижней трети экрана (не фоновое изображение), которое я хочу запустить по бесконечному циклу справа налево, но используя css. Я пробовал разные вещи, но до сих пор не смог заставить его работать.

Я определил img src в HTML, но при необходимости я могу сделать это в файле 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>

1 Ответ

0 голосов
/ 29 октября 2019

Я переместил класс "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>
...