渡一教育：旋转视差效果
实现效果
此演示仅在桌面端浏览器中可用
html
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>wanglei.live</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="item">
<img src="./asset/1.jpg" alt="" />
</div>
<div class="item">
<img src="./asset/2.jpg" alt="" />
</div>
<div class="item">
<img src="./asset/3.jpg" alt="" />
</div>
<div class="item">
<img src="./asset/4.jpg" alt="" />
</div>
<div class="item">
<img src="./asset/5.jpg" alt="" />
</div>
</div>
</body>
</html>css
css
.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: 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: 2px solid;
display: flex;
justify-content: center;
align-items: center;
}
.item img {
--d: -360deg;
/* 将图片放大有效防止旋转有白边 */
width: 260%;
height: 260%;
object-fit: cover;
}
.container {
--d: 360deg;
}
.container,
.item img {
animation: rotation 10s infinite linear;
}
/* 使用变量减少相同代码 */
@keyframes rotation {
to {
transform: rotate(var(--d));
}
}