<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.container {
width: 300px;
height: 300px;
margin: 0 auto;
margin-top: 100px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template:
"A A B"
"C D B"
"C E E";
grid-gap: 10px;
animation: r1 10s linear infinite;
}
.item {
overflow: hidden;
border: 2px solid;
display: flex;
justify-content: center;
align-items: center;
}
.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;
}
img {
width: 260%;
height: 260%;
object-fit: cover;
animation: r2 10s linear infinite;
}
@keyframes r1 {
to {
transform: rotate(360deg);
}
}
@keyframes r2 {
to {
transform: rotate(-360deg);
}
}
</style>
<body>
<div class="container">
<div class="item"><img src="img/a.jpg" alt=""></div>
<div class="item"><img src="img/b.jpeg" alt=""></div>
<div class="item"><img src="img/c.jpeg" alt=""></div>
<div class="item"><img src="img/d.jpeg" alt=""></div>
<div class="item"><img src="img/e.jpeg" alt=""></div>
</div>
</body>
</html>
12-09
3692
3692
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
