直接就是参照下面地址写的,
参考地址: https://www.douyin.com/user/self?modal_id=7226280781738528055&showTab=favorite_collection
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<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";
gap: 5px;
}
.item {
overflow: hidden;
border: 2px solid;
}
.item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.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;
}
.container{
--r: 360deg
}
.item img{
--r: -360deg
}
.item{
display: flex;
justify-content: center;
align-items: center;
}
.item img {
width: 260%;
height: 260%;
animation: rotation 10s linear infinite;
}
.container{
animation: rotation 10s linear infinite;
}
@keyframes rotation {
to {
transform: rotate(var(--r));
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<img src="img/tu1.jpg" alt=""/>
</div>
<div class="item">
<img src="img/tu2.jpg" alt=""/>
</div>
<div class="item">
<img src="img/tu3.jpg" alt=""/>
</div>
<div class="item">
<img src="img/tu4.jpg" alt=""/>
</div>
<div class="item">
<img src="img/tu5.jpg" alt=""/>
</div>
</div>
</body>
</html>
或者直接下载示例 Gitee-CSS旋转
7145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
