本文最后更新于854 天前，其中的信息可能已经过时，如有错误请评论留言
先看效果，如下：
我们用网格布局加上动画，实现这个效果，3行3列的表格加上模板样式实现，为了方便大家CV我直接放代码，在注释中说明是如何实现的，见下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>风车旋转</title>
<style>
.container{
width: 300px;
height: 300px;
margin: 0 auto;
margin-top: 100px;
display: grid; /* 网格布局 */
grid-template-rows: repeat(3, 1fr); /* 3行，每个占 1/3 */
grid-template-columns: repeat(3, 1fr); /* 3列，每个占 1/3 */
grid-template: /* 设置网格布局模板样式 */
'A A B'
'C D B'
'C E E';
gap: 5px; /* 网格间距 */
--r: 360deg; /* 定义变量，方便通过不同传参复用动画 */
}
.container, .item img {
animation: rotation 10s linear infinite; /* 旋转动画 时长10s 线性匀速 无限循环 */
}
@keyframes rotation {
to {
transform: rotate(var(--r)); /* 使用变量，旋转到指定角度 */
}
}
.item{
overflow: hidden;
border: 2px solid;
display: flex;
justify-content: center;
align-items: center;
}
.item img{
--s: 240%; /* 练一个定义变量熟悉一下 */
height: var(--s); /* 放大图片防止旋转时出现白边 */
width: var(--s); /* 同上 */
object-fit: cover; /* 让图片比例正常 */
--r: -360deg; /* 同上，定义变量，复用动画 */
}
/* 指定子元素在网格布局模板中的位置 */
.item:nth-child(1){
grid-area: A;
}
.item:nth-child(2){
grid-area: B;
}
.item:nth-child(3){
grid-area: C;
}
.item:nth-child(4){
grid-area: D;
}
.item:nth-child(5){
grid-area: E;
}
</style>
</head>
<body>
<div class="container">
<div class="item"><img src="./1.jpg" alt=""></div>
<div class="item"><img src="./2.jpg" alt=""></div>
<div class="item"><img src="./3.jpg" alt=""></div>
<div class="item"><img src="./4.jpg" alt=""></div>
<div class="item"><img src="./5.jpg" alt=""></div>
</div>
</body>
</html>
