【css酷炫效果】纯CSS实现照片堆叠效果

缘
创作背景
html结构
css样式
完整代码
- 基础版
- 进阶版(增加鼠标悬停查看)
效果图

想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492022

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

    <div class="photo-stack"><div class="photo" style="background-image: url('a.gif');"></div><div class="photo" style="background-image: url('a.gif');"></div><div class="photo" style="background-image: url('a.gif');"></div> </div>

css样式

body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;
}.photo-stack {position: relative;width: 300px; /* 根据需要调整宽度 */height: 400px; /* 根据需要调整高度 */perspective: 1000px; /* 添加透视效果 */
}.photo {position: absolute;width: 100%;height: 100%;background-size: cover;background-position: center;transition: transform 0.3s ease, box-shadow 0.3s ease;
}/* 设置每张照片的阴影和位置 */
.photo:nth-child(1) {z-index: 3; /* 最上层 */transform: translateY(0) rotateX(0deg); /* 初始位置 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}.photo:nth-child(2) {z-index: 2; /* 中间层 */transform: translateY(10px) rotateX(5deg); /* 稍微偏移和旋转 */box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.1); /* 阴影比上层更深 */
}.photo:nth-child(3) {z-index: 1; /* 最下层 */transform: translateY(20px) rotateX(10deg); /* 更多偏移和旋转 */box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 16px 32px rgba(0, 0, 0, 0.15); /* 最深的阴影 */
}

完整代码

基础版

<!DOCTYPE html>
<html lang="en"> 
<head><title>页面特效</title>
<style type="text/css">
body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;
}.photo-stack {position: relative;width: 300px; /* 根据需要调整宽度 */height: 400px; /* 根据需要调整高度 */perspective: 1000px; /* 添加透视效果 */
}.photo {position: absolute;width: 100%;height: 100%;background-size: cover;background-position: center;transition: transform 0.3s ease, box-shadow 0.3s ease;
}/* 设置每张照片的阴影和位置 */
.photo:nth-child(1) {z-index: 3; /* 最上层 */transform: translateY(0) rotateX(0deg); /* 初始位置 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}.photo:nth-child(2) {z-index: 2; /* 中间层 */transform: translateY(10px) rotateX(5deg); /* 稍微偏移和旋转 */box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.1); /* 阴影比上层更深 */
}.photo:nth-child(3) {z-index: 1; /* 最下层 */transform: translateY(20px) rotateX(10deg); /* 更多偏移和旋转 */box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 16px 32px rgba(0, 0, 0, 0.15); /* 最深的阴影 */
}
</style></head>
<body><div class="photo-stack"><div class="photo" style="background-image: url('a.gif');"></div><div class="photo" style="background-image: url('a.gif');"></div><div class="photo" style="background-image: url('a.gif');"></div> </div></body>
</html>

进阶版(增加鼠标悬停查看)

<!DOCTYPE html>
<html lang="en"> 
<head><title>页面特效</title>
<style type="text/css">
body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;
}.photo-stack {position: relative;width: 300px; /* 根据需要调整宽度 */height: 400px; /* 根据需要调整高度 */perspective: 1000px; /* 添加透视效果 */
}.photo {position: absolute;width: 100%;height: 100%;background-size: cover;background-position: center;transition: transform 0.3s ease, box-shadow 0.3s ease;
}/* 设置每张照片的阴影和位置 */
.photo:nth-child(1) {z-index: 3; /* 最上层 */transform: translateY(0) rotateX(0deg); /* 初始位置 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}.photo:nth-child(2) {z-index: 2; /* 中间层 */transform: translateY(10px) rotateX(5deg); /* 稍微偏移和旋转 */box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.1); /* 阴影比上层更深 */
}.photo:nth-child(3) {z-index: 1; /* 最下层 */transform: translateY(20px) rotateX(10deg); /* 更多偏移和旋转 */box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 16px 32px rgba(0, 0, 0, 0.15); /* 最深的阴影 */
}
.photo:hover {transform: translateX(410px) rotateX(-5deg); /* 悬停时上移并稍微旋转 */box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 24px 48px rgba(0, 0, 0, 0.2); /* 更深的阴影 */
}
</style></head>
<body><div class="photo-stack"><div class="photo" style="background-image: url('a.gif');"></div><div class="photo" style="background-image: url('a.gif');"></div><div class="photo" style="background-image: url('a.gif');"></div> </div></body>
</html>