当前位置：首页 > news >正文

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

news 来源：原创 2025/5/17 9:58:11

【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>