用前端代码写一个1~10大小的矩阵动画
时间: 2024-03-05 22:54:39 浏览: 15
好的,我可以为您提供一个使用CSS3动画和JavaScript实现的1~10大小的矩阵动画,代码如下:
HTML代码:
```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代码:
```css
.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: size-change;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes size-change {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}
```
JavaScript代码:
```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动画,会周期性地变换大小。当鼠标移动到数字单元格上时,背景色会变为红色,移开后又会变回蓝色。