时间戳

首页 > 解决方案 > 如何逐步更新表格中的图像（第二部分）

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>

我需要对旋转部分进行子类化，以便页面上的某些图像（如徽标）不会循环旋转。那行得通，除了所有图像都在彼此之上。如果可能的话，我的目标是一张桌子、两列、两行、四张旋转图像。但同时显示不具有那些“旋转”特性的图像。

任何建议都非常感谢！罗恩

标签： cssimage

解决方案

推荐阅读