CSS3 简易照片墙

最新推荐文章于 2022-08-04 17:01:02 发布

在路上_等你

最新推荐文章于 2022-08-04 17:01:02 发布

阅读量451

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3

本文链接：https://blog.youkuaiyun.com/chenshuangwtt/article/details/43234083

CSS3 专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3图片墙</title>
    <style>
        body{
            background-color:#eee;
        }

        h1{
            text-align:center;
        }

        .container{
            width:960px;
            height:450px;
            margin:60px auto;
            position:relative;
        }

        .container img{
            padding:10px 10px 15px;
            background:white;
            border:1px solid #ddd;
            box-shadow:2px 2px 3px rgba(50, 50, 50, 0.4);
            -webkit-transition:all 0.5s ease-in;
            -moz-transition:all 0.5s ease-in;
            transition:all 0.5s ease-in;
            position:absolute;
            z-index:1;
        }

        .container img:hover{
            box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
            -webkit-transform:rotate(0deg) scale(1.20);
            -moz-transform:rotate(0deg) scale(1.20);
            transform:rotate(0deg) scale(1.20);
            z-index:2;
        }

        .pic1{
            left: 400px;
            top: 0;
            -webkit-transform: rotate(-5deg);
            -moz-transform: rotate(-5deg);
            transform: rotate(-5deg);
        }

        .pic2{
            top: 0;
            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);
        }

        .pic8
        {
            bottom: -20px;
            right: 630px;
            -webkit-transform: rotate(5deg);
            -moz-transform: rotate(5deg);
            transform: rotate(5deg);
        }

        .pic9
        {
            top: 90px;
            left: 550px;
            -webkit-transform: rotate(15deg);
            -moz-transform: rotate(15deg);
            transform: rotate(15deg);
        }

        .pic10
        {
            left:180px;
            top:20px;
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }


    </style>
</head>
<body>
    <h1>照片墙</h1>
    <div class="container">
        <img class="pic pic1" src="images/mm1.jpg">
        <img class="pic pic2" src="images/mm2.jpg">
        <img class="pic pic3" src="images/mm3.jpg">
        <img class="pic pic4" src="images/mm4.jpg">
        <img class="pic pic5" src="images/mm5.jpg">
        <img class="pic pic6" src="images/mm6.jpg">
        <img class="pic pic7" src="images/mm7.jpg">
        <img class="pic pic8" src="images/mm8.jpg">
        <img class="pic pic9" src="images/mm9.jpg">
        <img class="pic pic10" src="images/mm10.jpg">
    </div>
</body>
</html>