效果展示

图1 未点击

图2 点击后

知识点：transform和transition

html部分

    <div class="wrapper"><ul class="stacks-cards"><li class="stack stack1"><ul><li class="card card1"><img src="./img/pic1.jpg" alt=""><div class="con">pictures</div></li><li class="card card2"><img src="./img/pic2.jpg" alt=""><div class="con">pictures</div></li><li class="card card3"><img src="./img/pic3.jpg" alt=""><div class="con">pictures</div></li></ul></li><li class="stack stack2"><ul><li class="card card1"><img src="./img/pic4.jpg" alt=""><div class="con">pictures</div></li><li class="card card2"><img src="./img/pic5.jpg" alt=""><div class="con">pictures</div></li><li class="card card3"><img src="./img/pic6.jpg" alt=""><div class="con">pictures</div></li></ul></li><li class="stack stack3"><ul><li class="card card1"><img src="./img/pic7.jpg" alt=""><div class="con">pictures</div></li><li class="card card2"><img src="./img/pic8.jpg" alt=""><div class="con">pictures</div></li><li class="card card3"><img src="./img/pic9.jpg" alt=""><div class="con">pictures</div></li></ul></li></ul></div><script src="jquery.js"></script><script>$('.stacks-cards').on('click',function(e){$(this).toggleClass('transition');});</script>

css部分

*{margin: 0;padding: 0;list-style: none;
}
body{height: 680px;background: linear-gradient(to left top,#f5a1d5 0% ,#cdd3e9) ;
}
.stacks-cards{width: 600px;margin: 50px auto;/* border: 1px solid black; */position: relative;cursor: pointer;
}
.stack{transition: all 0.8s cubic-bezier(0.63,0.15,0.03,1.22);position: absolute;left: 0;
}
.stack .card1{z-index:10;transform: rotateZ(-2deg);
}
.stack .card2{z-index:9;transform: rotateZ(7deg);
}
.stack .card3{z-index:8;transform: rotateZ(5deg);
}
.card{width: 200px;height: 200px;border-radius: 10px;background-color: #fff;padding: 5px;/* float: left; */box-shadow: 1px 2px 2px 0px #aaa;position: absolute;top: 0;left: 0;transition: all 0.8s cubic-bezier(0.63,0.15,0.03,1.22);
}
.card img{width: 200px;height: 150px;border-radius: 10px;
}
.card .con{font-size: 20px;height: 40px;line-height: 40px;text-align: center;padding: 5px 10px;
}
.transition .stack1{left: 0px;
}
.transition .stack2{left: 220px;
}
.transition .stack3{left: 440px;
}
.transition .card{transform: rotateZ(0deg);
}
.transition .card1{top: 440px;
}
.transition .card2{top: 220px;
}

css3实现图片折叠效果相关推荐

PPT模板制作图片折叠效果怎么做？
图片的添加在ppt模板制作过程中,可以提升ppt模板的美观和精致,如何给PPT模板的图片添加折叠效果呢?PPT家园今天就来给大家介绍一下,ppt模板图片折叠效果的制作方法. 模板入口:PPT模板幻灯 ...
CSS3 transform3D 图片翻转效果
基本思路来自于CSS3 transform3D 图片翻转效果一贴基于上帖基本实现一个3D 图片翻转效果demo,为了再加一个延时便成为下图效果: 代码如下: <!doctype html> ...
[前端css-3] 实现图片卷帘效果，以及动画
[前端css-3] 实现图片卷帘效果,以及动画 1.效果展示: 效果预览 2.知识点: 1.position(相对定位/绝对定位)2.伪类(:after/:before)3.animation(动画) ...
css3的卡片折叠效果
今天笔者将带大家利用css3相关特性实现如下Gif图纸张折叠效果,它仅是CSS,不依赖JavaScript.喜欢的小伙伴可以拿去学习一下. 在本教程中,我们将学习使用CSS3功能(例如背景渐变和框阴影 ...
【CSS3】 CSS3实现“图片阴影”效果
学习前端有点类似于学习英语,很多东西需要一点点累积,下面讲解CSS3实现图片阴影效果. 1.效果展示:Shadow Effect这个块有阴影的效果,尤其是底边的曲线阴影非常明显,本文主要以" ...
用CSS3实现图片切换效果
当几个页面的整体布局相同,只有某个部分在各页面不同时,可以将整体布局的CSS样式写在同一个.css文件中.本次的CSS实现图片s是每个页面下的图片切换效果不同,除此之外,其他的效果都一样.因此,我们可 ...
CSS3实现图片翻转效果
直接上代码看效果 html: <div class="father"><div class="before">正面</div> ...
css3之图片展开效果和盾牌飞入
一.图片展开效果 1.先写一个装图片的容器,设置这个容器的样式 <style> .box{width:300px; height:300px //宽度和高度为图片的宽高 }</sty ...
html鼠标滚动图片折叠,鼠标滑过图片3D折叠效果
本教程我们将使用CSS3 3D transforms和jQuery来制作一个神奇的3D折叠效果. 在我们的demo中,图片在鼠标滑过的时候被折叠,空出来的部分将显示图片的一些信息.我们将创建一个放置图 ...

css3实现图片折叠效果

效果展示

css3实现图片折叠效果相关推荐

最新文章

热门文章