用前端代码写一个1~10大小的矩阵动画 动画转圈

好的，以下是使用CSS3动画和JavaScript实现的1~10大小的矩阵动画，让它们转圈的代码：

HTML代码：

<div class="matrix-container">
  <div class="matrix-row">
    <div class="matrix-cell">1</div>
    <div class="matrix-cell">2</div>
    <div class="matrix-cell">3</div>
    <div class="matrix-cell">4</div>
    <div class="matrix-cell">5</div>
  </div>
  <div class="matrix-row">
    <div class="matrix-cell">6</div>
    <div class="matrix-cell">7</div>
    <div class="matrix-cell">8</div>
    <div class="matrix-cell">9</div>
    <div class="matrix-cell">10</div>
  </div>
</div>

CSS3代码：

.matrix-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 300px;
  border: 2px solid black;
  border-radius: 5px;
}

.matrix-row {
  display: flex;
  flex-direction: row;
}

.matrix-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  font-size: 24px;
  font-weight: bold;
  color: white;
  background-color: blue;
  border-radius: 5px;
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.matrix-cell:nth-child(1) { animation-delay: 0s; }
.matrix-cell:nth-child(2) { animation-delay: 0.2s; }
.matrix-cell:nth-child(3) { animation-delay: 0.4s; }
.matrix-cell:nth-child(4) { animation-delay: 0.6s; }
.matrix-cell:nth-child(5) { animation-delay: 0.8s; }
.matrix-cell:nth-child(6) { animation-delay: 1s; }
.matrix-cell:nth-child(7) { animation-delay: 1.2s; }
.matrix-cell:nth-child(8) { animation-delay: 1.4s; }
.matrix-cell:nth-child(9) { animation-delay: 1.6s; }
.matrix-cell:nth-child(10) { animation-delay: 1.8s; }

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

JavaScript代码：

const cells = document.querySelectorAll('.matrix-cell');

cells.forEach((cell) => {
  cell.addEventListener('mouseover', () => {
    cell.style.backgroundColor = 'red';
  });
  
  cell.addEventListener('mouseout', () => {
    cell.style.backgroundColor = 'blue';
  });
});

这段代码会在页面中创建一个矩阵，数字从1到10排列在其中。每个数字单元格都有一个CSS3动画，会周期性地绕着圆心旋转。当鼠标移动到数字单元格上时，背景色会变为红色，移开后又会变回蓝色。