jquery css实现4种图片堆叠相册效果代码
代码语言：html
所属分类：画廊相册
代码描述：jquery css实现4种图片堆叠相册效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*,*:before,*:after {
box-sizing:border-box;
}
html {
min-height:100%;
}
body {
font-size:14px;
font-family:'Raleway','Source Sans Pro',sans-serif;
font-weight:700;
margin:20px;
height:2000px;
background:-webkit-linear-gradient(right bottom,#F5A1D5 0%,#CDD3E9 100%);
background:linear-gradient(to left top,#F5A1D5 0%,#CDD3E9 100%);
}
h1,h2,h3,h4,h5,h6,p {
font-weight:300;
margin:0;
padding:0;
}
header.hero {
background:rgba(255,255,255,0.6);
text-align:center;
padding:20px 0;
border-bottom:4px solid rgba(255,255,255,0.6);
margin:0 0 20px;
}
header.hero h1 {
font-size:3em;
color:#555;
margin:0 0 5px;
}
hr {
border:0;
border-top:1px solid rgba(255,255,255,0.6);
padding:0 0 20px;
}
ul.cards {
width:660px;
margin:0 auto 20px;
height:300px;
list-style-type:none;
position:relative;
padding:20px 0;
cursor:pointer;
}
ul.cards li.title {
margin:0 0 20px;
}
ul.cards li.title h2 {
font-weight:700;
}
ul.cards li.card {
background:#FFF;
overflow:hidden;
height:200px;
width:200px;
border-radius:10px;
position:absolute;
left:0px;
box-shadow:1px 2px 2px 0 #aaa;
-webkit-transition:all 0.4s cubic-bezier(0.63,0.15,0.03,1.12);
transition:all 0.4s cubic-bezier(0.63,0.15,0.03,1.12);
}
ul.cards li.card img {
max-width:100%;
padding:5px;
height:auto;
}
ul.cards li.card div.content {
padding:5px 10px;
}
ul.cards li.card.card-1 {
z-index:10;
-webkit-transform:rotateZ(-2deg);
transform:rotateZ(-2deg);
}
ul.cards li.card.card-2 {
z-index:9;
-webkit-transform:rotateZ(-7deg);
transform:rotateZ(-7deg);
-webkit-transition-delay:0.05s;
transition-delay:0.05s;
}
ul.cards li.card.card-3 {
z-index:8;
-webkit-transform:rotateZ(5deg);
transform:rotateZ(5deg);
-webkit-transition-delay:0.1s;
transition-delay:0.1s;
}
ul.cards.transition li.card {
-webkit-transform:rotateZ(0deg);
transform:rotateZ(0deg);
}
ul.cards.transition li.card.card-1 {
left:440px;
}
ul.cards.transition li.card.card-2 {
left:220px;
}
ul.card-stacks {
width:660px;
list-style-type:none;
margin:0 auto 20px;
padding:0;
position:relative;
cursor:pointer;
height:700px;
}
ul.card-stacks li.title {
margin:0 0 20px;
}
ul.card-stacks li.title h2 {
font-weight:700;
}
ul.card-stacks li.stack {
position:absolute;
left:0px;
-webkit-transition:all 0.4s cubic-bezier(0.63,0.15,0.03,1.02);
transition:all 0.4s cubic-bezier(0.63,0.15,0.03,1.02);
}
ul.card-stacks li.stack ul.cards-down {
position:relative;
margin:0 0 20px;
padding:20px;
list-style-type:none;
margin:0;
padding:0;
}
ul.card-stacks li.stack ul.cards-down li.card {
-webkit-transition:all 0.4s cubic-bezier(0.63,0.15,0.03,1.22);
transition:all 0.4s cubic-bezier(0.63,0.15,0.03,1.22);
left:0px;
-webkit-transition-delay:0.4s;
transition-delay:0.4s;
background:#FFF;
overflow:hidden;
height:200px;
width:200px;
border-radius:10px;
position:absolute;
top:0px;
box-shadow:1px 2px 2px 0 #aaa;
}
ul.card-stacks li.stack ul.cards-down li.card img {
max-width:100%;
padding:5px;
height:auto;
}
ul.card-stacks li.stack ul.cards-down li.card div.content {
padding:5px 10px;
}
ul.card-stacks li.stack ul.cards-down li.card.card-1 {
z-index:10;
-webkit-transform:rotateZ(-2deg);
transform:rotateZ(-2deg);
}
ul.card-stacks li.stack ul.cards-down li.card.card-2 {
z-index:9;
-webkit-transform:rotateZ(-7deg);
transform:rotateZ(-7deg);
}
ul.card-stacks li.stack ul.cards-down li.card.card-3 {
z-index:8;
-webkit-transform:rotateZ(5deg);
transform:rotateZ(5deg);
}
ul.card-stacks.transition li.stack.stack-1 {
left:0px;
}
ul.card-stacks.transition li.stack.stack-2 {
left:220px;
}
ul.card-stacks.transition li.stack.stack-3 {
left:440px;
}
ul.card-stacks.transition li.stack ul.cards-down li.card {
-webkit-transform:rotateZ(0deg);
transform:rotateZ(0deg);
}
ul.card-stacks.transition li.stack ul.cards-down li.card.card-1 {
top:440px;
}
ul.card-stacks.transition li.stack ul.cards-down li.card.card-2 {
top:220px;
}
ul.cards-split {
width:660px;
height:280px;
list-style-type:none;
position:relative;
margin:0 auto 20px;
padding:20px;
cursor:pointer;
}
ul.cards-split li.title {
margin:0 0 20px;
}
ul.cards-split li.title h2 {
font-weight:700;
}
ul.cards-split li.card {
background:#FFF;
overflow:hidden;
height:200px;
width:200px;
border-radius:10px;
position:absolute;
left:220px;
box-shadow:1px 2px 2px 0 #aaa;
-webkit-transition:all 0.4s cubic-bezier(0.63,0.15,0.03,1.12);
transition:all 0.4s cubic-bezier(0.63,0.15,0.03,1.12);
}
ul.cards-split li.card img {
max-width:100%;
padding:5px;
height:auto;
}
ul.cards-split li.card div.content {
padding:5px 10px;
}
ul.cards-split li.card.card-1 {
z-index:10;
-webkit-transform:rotateZ(-2deg);
transform:rotateZ(-2deg);
}
ul.cards-split li.card.card-2 {
z-index:9;
-webkit-transform:rotateZ(-7deg);
transform:rotateZ(-7deg);
-webkit-transition-delay:0.05s;
transition-delay:0.05s;
}
ul.cards-split li.card.card-3 {
z-index:8;
-webkit-transform:rotateZ(5deg);
transform:rotateZ(5deg);
-webkit-transition-delay:0.1s;
transition-delay:0.1s;
}
ul.cards-split.transition li.card {
-webkit-transform:rotateZ(0deg);
transform:rotateZ(0deg);
}
ul.cards-split.transition li.card.card-1 {
left:0px;
}
ul.cards-split.transition li.card.card-2 {
left:440px;
}
ul.cards-split.transition li.card.card-3 {
left:220px;
}
ul.cards-split-delay {
width:660px;
height:280px;
list-style-type:none;
position:relative;
margin:0 auto 20px;
padding:20px;
cursor:pointer;
}
ul.cards-split-delay li.title {
margin:0 0 20px;
}
ul.cards-split-delay li.title h2 {
font-weight:700;
}
ul.cards-split-delay li.card {
background:#FFF;
overflow:hidden;
height:200px;
width:200px;
border-radius:10px;
position:absolute;
left:220px;
box-shadow:1px 2px 2px 0 #aaa;
-webkit-transition:all 0.4s cubic-bezier(0.63,0.15,0.03,1.12);
transition:all 0.4s cubic-bezier(0.63,0.15,0.03,1.12);
}
ul.cards-split-delay li.card img {
max-width:100%;
padding:5px;
height:auto;
}
ul.cards-split-delay li.card div.content {
padding:5px 10px;
}
ul.cards-split-delay li.card.card-1 {
z-index:10;
-webkit-transform:rotateZ(-2deg);
transform:rotateZ(-2deg);
}
ul.cards-split-delay li.card.card-2 {
z-index:9;
-webkit-transform:rotateZ(-7deg);
transform:rotateZ(-7deg);
-webkit-transition-delay:0.6s;
transition-delay:0.6s;
}
ul.cards-split-delay li.card.card-3 {
z-index:8;
-webkit-transform:rotateZ(5deg);
transform:rotateZ(5deg);
-webkit-transition-delay:0s;
transition-delay:0s;
}
ul.cards-split-delay.transition li.card {
-webkit-transform:rotateZ(0deg);
transform:rotateZ(0deg);
}
ul.cards-split-delay.transition li.card.card-1 {
left:0px;
}
ul.cards-split-delay.transition li.card.card-2 {
left:440px;
}
ul.cards-split-delay.transition li.card.card-3 {
left:220px;
-webkit-transition-delay:0.6s;
transition-delay:0.6s;
}
</style>
</head>
<body>
<div class="htmleaf-container">
<div class="htmleaf-content">
<ul class="cards">
<li class="title">
<h2>Slide right</h2>
</li>
<li class="card card-1"><img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_100,/quality,q_90" />
<div class="content">
<h1>Card 1 Title</h1>
<p>Card description</p>
</div>
</li>
<li class="card card-2"><img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_100,/quality,q_90" />
<div class="content">
<h1>Card 2 Title</h1>
<p>Card description</p>
</div&g.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0