使用css3实现图片墙的效果

最新推荐文章于 2021-06-03 18:30:01 发布

snail_29

最新推荐文章于 2021-06-03 18:30:01 发布

阅读量527

点赞数

分类专栏： web前端文章标签： css3 杭州图片

本文链接：https://blog.csdn.net/u012491775/article/details/44938917

版权

web前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

<body>
    <h1 style="text-align: center">Olivia Palermo</h1>
    <div class="container">
        <img class="pic1" src="Olivia Palermo/Olivia%20Palermo1.jpg" style="width: 150px">
        <img class="pic2" src="Olivia Palermo/Olivia%20Palermo2.jpg" style="width: 150px">
        <img class="pic3" src="Olivia Palermo/Olivia%20Palermo3.jpg" style="width: 150px">
        <img class="pic4" src="Olivia Palermo/Olivia%20Palermo4.jpg" style="width: 150px">
        <img class="pic5" src="Olivia Palermo/Olivia%20Palermo5.jpg" style="width: 150px">
        <img class="pic6" src="Olivia Palermo/Olivia%20Palermo6.jpg" style="width: 150px">
        <img class="pic7" src="Olivia Palermo/Olivia%20Palermo7.jpg" style="width: 150px">
        <img class="pic8" src="Olivia Palermo/Olivia%20Palermo8.jpg" style="width: 150px">
        <img class="pic9" src="Olivia Palermo/Olivia%20Palermo9.jpg" style="width: 150px">
        <img class="pic10" src="Olivia Palermo/Olivia%20Palermo10.jpg" style="width: 150px">
        <img class="pic11" src="Olivia Palermo/Olivia%20Palermo11.jpg" style="width: 150px">
    </div>

</body>

HTML部分给出一个<div>然后放入10张图片

以下是style.css部分的效果代码：

body{
    background-color: #eeeeee;
}

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

img{
    padding: 10px 10px 15px;
    border: 1px solid white;
    background: #ffffff;
    position: absolute;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
    z-index: 1;
}

img:hover{
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    box-shadow: 10px 10px 15px #ccc;
    z-index: 2;
}

.pic1{
    top: 50px;
    left: 200px;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
}

.pic2{
    top: 500px;
    left: 10px;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

.pic3{
    top: 250px;
    left: 200px;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
}

.pic4{
    top: 330px;
    left: 110px;
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    transform: rotate(25deg);
}

.pic5{
    top: 50px;
    left: 840px;
    -webkit-transform: rotate(28deg);
    -moz-transform: rotate(28deg);
    -ms-transform: rotate(28deg);
    -o-transform: rotate(28deg);
    transform: rotate(28deg);
}

.pic6{
    top: 300px;
    left: 470px;
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    transform: rotate(15deg);
}

.pic7{
    top: 501px;
    left: 740px;
    -webkit-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
}

.pic8{
    top: 316px;
    left: 500px;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

.pic9{
    top: 650px;
    left: 940px;
    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    transform: rotate(-15deg);
}

.pic10{
    top: 50px;
    left: 430px;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

.pic11{
    top: 658px;
    left: 40px;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    transform: rotate(-30deg);
}