Блог

Главная - Вопросы по программированию - Как постепенно обновлять изображения в таблице (часть II)

Как постепенно обновлять изображения в таблице (часть II)

#css #image

#css #изображение

Вопрос:

В ответ на мой последний вопрос «Как постепенно обновлять изображения в таблице», A Haworth предложил использовать CSS-анимацию и предоставил для нее код, который отлично работал. За исключением того, что все изображения на странице были либо наложены друг на друга, либо просто отображались отдельно, но не вращались (по изображению)

 .center {
  margin-left: auto;
  margin-right: auto;
}

table {
  border-collapse: separate;
  border-spacing: 10px 20px;
}

table,
table td;

}
.center {
  margin-left: auto;
  margin-right: auto;
}
@keyframes rotateimgs {
  0% {
    opacity: 0;
  }
  
  33.33% {
    opacity: 1;
  }
  
  66.66% {
    opacity: 0;
  }
  
  100% {
    opacity: 0;
  }
}
td {
  position: relative;
  --interval: 5s;
  /* set this to what you want the fade-in time to be */
}
.rotate {
  position: absolute;
  top: 0;
  left: 0;
  animation-name: rotateimgs;
  animation-duration: calc(var(--interval) * 3);
  animation-iteration-count: infinite;
  opacity: 0;
}
img .rotate:nth-child(1) {
  animation-delay: 0s;
  position: relative;
}
img .rotate:nth-child(2) {
  animation-delay: var(--interval);
}
img .rotate:nth-child(3) {
  animation-delay: calc(var(--interval)*2);
} 
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
</head>

<body>
  <table class="center" style="max-width:100%">
    <tr>
      <td>
        <img class="rotate" src="https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png" />
        <img class="rotate" src="https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png" />
        <img class="rotate" src="https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png" />
      </td>

      <td>
        <img class="rotate" src="https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png" />
        <img class="rotate" src="https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png" />
        <img class="rotate" src="https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png" />
      </td>
    </tr>


    <tr>
      <td>
        <img class="rotate" src="https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png" />
        <img class="rotate" src="https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png" />
        <img class="rotate" src="https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png" />
      </td>

      <td>
        <img class="rotate" src="https://media.geeksforgeeks.org/wp-content/uploads/20200318142245/CSS8.png" />
        <img class="rotate" src="https://media.geeksforgeeks.org/wp-content/uploads/20200318142309/php7.png" />
        <img class="rotate" src="https://media.geeksforgeeks.org/wp-content/uploads/20200318142254/html9.png" />
      </td>
    </tr>
  </table>
</body>

</html>

Мне нужно было подклассировать раздел поворота, чтобы некоторые изображения на странице, например логотипы, не выполняли цикл поворота. Это сработало, за исключением того, что все изображения находятся друг на друге. Моя цель, если возможно, одна таблица, два столбца, две строки, всего четыре вращающихся изображения. НО В ТО ЖЕ ВРЕМЯ отображать изображения, которые не обладают такими качествами «поворота».

Любые предложения приветствуются! РОН

Комментарии:

1. Было бы полезно, если бы у вас был наглядный пример того, как вы хотите, чтобы выглядел конечный результат.

2. Когда изображение и css затем jsfiddle, если вам нужна дополнительная помощь.