一个基于 CSS3 的视差滚动相册，采用网格布局（主要）与弹性布局。
视差滚动相册
源代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转视差相册</title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
margin: 0 auto;
margin-top: 100px;
display: grid;
/* 列 * 3，每列占 1/3，repeat的添加与否效果一致 */
/* grid-template-columns: repeat(3, 1fr);
grid-template-rows: (3, 1fr); */
/* grid-template 会覆盖前面的 grid-template-columns & grid-template-rows */
grid-template:
"A A B"
"C D B"
"C E E";
grid-gap: 10px;
padding: 10px;
border: 5px solid transparent;
border-image: linear-gradient(45deg, #df270ae0, #dc8d30, #deeb44, #01eb3e, #138fe9, #7127ee) 1;
animation: rotation 15s infinite linear;
}
.item {
overflow: hidden;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
}
.item img {
animation: rotation1 15s infinite linear;
width: 300%;
height: 300%;
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;
}
@keyframes rotation {
to {
transform: rotate(360deg);
}
}
@keyframes rotation1 {
to {
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<div class="content">
<div class="item">
<img src="./static/pic1.jpg">
</div>
<div class="item">
<img src="./static/pic2.jpg">
</div>
<div class="item">
<img src="./static/pic3.jpg">
</div>
<div class="item">
<img src="./static/pic4.jpg">
</div>
<div class="item">
<img src="./static/pic5.jpg">
</div>
</div>
</body>
</html>
