jquery css实现4种图片堆叠相册效果代码-html代码-BFW代码库

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);
.........完整代码请登录后点击上方下载按钮下载查看