粘贴代码就能跑。不多说。886.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container {
width: 300px;
height: 300px;
margin: 0 auto;
margin-top: 100px;
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-template:
'A A B'
'C D B'
'C E E';
gap: 10px;
}
.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;
}
.item {
overflow: hidden;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.item img {
width: 250%;
height: 250%;
object-fit: cover;
animation: rotation 10s linear infinite reverse;
}
.container {
animation: rotation 10s linear infinite;
}
@keyframes rotation {
to {
transform: rotate(360deg);
}
}
</style>
<body>
<div class="container">
<div class="item">
<img src="https://skp-cn-cdn.djiits.com/uploads/cn_files/1557821887995-ce7b5708ac31dc1c8a3c4b6ca7196fc6.jpg@!1200webp" alt="" />
</div>
<div class="item">
<img src="https://skp-cn-cdn.djiits.com/uploads/cn_files/1557832720545-9a7407332e052f3b0192f80488c69066.jpg@!1200webp" alt="" />
</div>
<div class="item">
<img src="https://skp-cn-cdn.djiits.com/uploads/cn_files/1557822599450-59b79c156e29670c7064f6806baa8ebf.jpg@!1200webp" alt="" />
</div>
<div class="item">
<img src="https://skp-cn-cdn.djiits.com/uploads/cn_files/1557470096689-8acf1fcb881ec192e22518b8314cb4df.jpg@!1200webp" alt="" />
</div>
<div class="item">
<img src="https://skp-cn-cdn.djiits.com/uploads/cn_files/1557832787318-ee321cae96776765353fdeef7dc96cd6.jpg@!1200webp" alt="" />
</div>
</div>
</body>
</html>
