CSS3 视差滚动相册

tsx81428 · 2024-8-28 00:26:59

一个基于 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>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

CSS3 视差滚动相册

0 个回复

快速回复

楼主热帖

标签云