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

已于 2025-03-18 10:16:31 修改
阅读量439 收藏 5
点赞数 1
文章标签： css css3 前端
于 2025-03-18 09:47:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011561335/article/details/146322633
版权

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

想直接拿走的老板，链接放在这里：https://download.youkuaiyun.com/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>

效果图

在这里插入图片描述
在这里插入图片描述

CSS | 实现图片依次叠加的效果
虎鲸虎鲸
09-19 5266
最近在抄一个页面首页的样式 它首页有一个全屏轮播图 中间包含一页 是三张图片依次出现 以下为相关代码 index.html <div class="slide"> <div class="combine-pic"> <img alt="pic" class="combine-pic one" src="./images/4.j...
html5图片重叠部分,CSS幻灯片，切换图片时，2张图片有一部分出现重叠。
weixin_39989980的博客
05-30 338
HTMLCSS.middle{width: 100%;min-height: 100%;}.slide{position: absolute;top: 0;left: 0;width: 100%;min-height: 100%;-webkit-animation: slide 10s linear infinite 0s;}#slide_1.slide{background: url(http:...
css 浮动与定位 【小案例】-- sticky 图片堆叠
m0_74897683的博客
10-19 386
本案例因为兼容性的问题，建议在Chrome浏览器，其他浏览器可能没效果哦，这个效果现在一般使用JavaScript实现 ~~
前端学习（205）:animation动画库
歌谣的博客
12-24 493
动画库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...
一款基于jQuery和CSS3的图片层叠效果插件
05-02
一款基于jQuery和CSS3的图片层叠效果插件
css3图片层叠菜单效果.rar
07-04
css3图片层叠菜单效果
CSS3/HTML5层叠展开的图片特效.rar
07-10
CSS3/HTML5层叠展开的图片特效，这里引入了mootools.js，一个与jquery类似的前端开发插件，一共有6种不同的图片叠加效果，十分新颖，视觉效果不错。本图片展示适合移动设备使用，在电脑上使用因不支持IE8，有些遗憾。
【css酷炫效果】纯CSS实现照片堆叠效果.zip
最新发布
03-18
博文地址：https://blog.youkuaiyun.com/u011561335/article/details/146322633
3D堆叠式幻灯片插件：jQuery和CSS3实现酷炫效果
利用jQuery和CSS3开发的超酷3D堆叠式幻灯片插件，是实现这种效果的有效工具之一。 ### 知识点一：jQuery jQuery是一个快速、小巧、功能强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互，使得...
CSS3动画特效：实现酷炫层叠菜单滑动效果
CSS3中，通过定位（position）、上下文（z-index）以及边框和阴影（box-shadow）等属性，可以实现菜单项之间的堆叠效果。 4. 动画性能优化：为了确保动画流畅，开发者需要关注性能优化。使用硬件加速（如Webkit的...
15种html5+css3图片堆叠图片展示特效
12-13
这是一款html5和css3制作的图片堆叠图片展示特效，就像一幅扑克牌堆叠在一起，最开始只能看到一张，点击按钮后就会展开成几张，非常有意思。
纯CSS实现鼠标悬停缩略图放大的酷炫效果
但需注意的是，使用`transform: scale()`时，可能会导致图片元素无法被点击或选中，因为`transform`属性会创建一个新的堆叠上下文。 需要注意的是，上述代码仅为示例，实际应用时可能需要根据页面其他样式进行调整...
实现酷炫堆叠效果的jQuery图片切换插件
4. 图片抽离效果：当用户点击某张图片时，插件会运用JavaScript及CSS动画来实现图片的抽出效果，并将其移至堆叠图片的最后位置。这一效果是通过改变元素样式和CSS过渡属性（transition）来实现平滑动画效果。 5. ...
CSS学习案例（11）：3D堆叠图片ui布局特效
Rengarhunt的博客
12-03 641
<div class="container"> <div class="food-card"> <div class="pic"> <img src="https://www.17sucai.com/preview/1424582/2020-07-03/dz/img/1.jpg" alt="Pizza"> </div> &lt..
CSS2.0层叠样式表—CSS高级技巧
qq_36893834的博客
08-07 192
CSS高级技巧包括伪类、伪元素、CSS变量等。伪类是用来表示元素特殊状态，如:hover :active等。伪元素则是用来添加元素特定的内容,如::before, ::after等。CSS变量可以使代码易于维护和修改，实现动态样式。同时，使用CSS布局属性像display: flex，可以使布局更加灵活和响应。另外，像CSS网格布局，CSS动画和过渡等高级技巧也可以使页面设计更加炫酷和生动。掌握这些技巧可以帮助你你成为一名高级的CSS开发人员。
CSS 中的图像叠加指南
分享身边生活经验blog
08-26 1983
叠加是用于在图像顶部创建附加图层的效果。它们的目的可能是为了美观或提高文本可读性，特别是对于视力受损的人。我们通常在 CSS 中创建叠加层，以获取文本、图标或其他图像后面的图像。本指南将向您展示如何在 CSS 中的背景图像和常规元素上很好地应用叠加层。我们将介绍：CSS 中的定位布局功能探索元素的各种图像叠加 CSS 效果。
关于CSS中堆叠样式
qq_43478725的博客
02-09 157
css层叠样式
两个图片叠加在一起css,css实现图片叠加的几种思路（记录笔记）
weixin_29198045的博客
08-03 5478
3、使用div层叠，设置两个div，一个position:relative;一个position:absolute; 就可以实现在div里面显示绝对定位，而不跑出div的层叠div，对于没有固定整个界面的width和height的情况适用。如果界面的宽高都固定了像素值，可以不用在外层套div，直接写位置。层叠原理：两个div的z-index层级不同，所以可将设为透明的图片放在下面，顶层的图片透明度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冰夏之夜影

赠人玫瑰，手留余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值