css布局实现照片墙效果代码-html代码-BFW代码库

css布局实现照片墙效果代码

代码语言：html

代码描述：css布局实现照片墙效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
@charset "utf-8";* {
    padding: 0;
    margin: 0;
}

    div {
        font-family: "微软雅黑";
        font-size: 14px;
        color: #666;
        padding: 0;
        margin: 0;
    }
    body {
        background: #eee;
    }

    /*css3实现照片墙的样式*/
    .container {
        width: 960px;
        height: 450px;
        margin: 160px auto;
        position: relative;
    }
    .container img {
        position: absolute;
        padding: 10px 10px 15px;
        background: #fff;
        border: 1px solid #ddd;
        -webkit-transition: 1s;
        -moz-transition: 1s;
        transition: 1s;
        z-index: 1;
    }
    .container img:hover {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-box-shadow: 5px 5px 5px #ddd;
        -moz-box-shadow: 5px 5px 5px #ddd;
        box-shadow: 5px 5px 5px #ddd;
        z-index: 2;
        cursor: pointer;
    }
    .pic1 {
        top: 0px;
        left: 400px;
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    .pic2 {
        top: 0px;
        left: 600px;
        -webkit-transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }
    .pic3 {
        bottom: 0;
        right: 0;
        -webkit-transform: rotate(5deg);
        -moz-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    .pic4 {
        bottom: 0;
        left: 300px;
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    .pic5 {
        bottom: 0;
        left: 0;
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    .pic6 {
        top: 0;
        left: 0;
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        transform: rotate(10deg);
    }
    .pic7 {
        top: 0;
        left: 850px;
        -webkit-transform: rotate(20deg);
        -moz-transform: rotate(20deg);
        transform: rotate(20deg);
    }
    .p.........完整代码请登录后点击上方下载按钮下载查看