CSS3制作的照片墙

照片墙效果

图片自己弄

html 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>photowall</title>
    <link rel="stylesheet" href="photo.css" type="text/css">
</head>
<body>
    <div class="contenter">
        <img class="btn img1" src="img/1.jpg" alt="">
        <img class="btn img2" src="img/2.jpg" alt="">
        <img class="btn img3" src="img/3.jpg" alt="">
        <img class="btn img4" src="img/4.jpg" alt="">
        <img class="btn img5" src="img/5.jpg" alt="">
        <img class="btn img6" src="img/13.jpg" alt="">
        <img class="btn img7" src="img/7.jpg" alt="">
        <img class="btn img8" src="img/8.jpg" alt="">
        <img class="btn img9" src="img/9.jpg" alt="">
        <img class="btn img10" src="img/10.jpg" alt="">
        <img class="btn img11" src="img/11.jpg" alt="">
        <img class="btn img12" src="img/12.jpg" alt="">
    </div>
</body>
</html>

CSS代码:

*{
    margin: 0px;
    padding: 0px;
}
body{
    background: #fdfddd;
}
.contenter{
    width: 80%;
    margin: 10px auto;
    position: relative;
}
.btn{
    width: 180px;
    padding: 10px;
    margin: 3px auto;
    background: white;
    box-shadow: 5px 3px 5px 2px #888888;;
    border: 1px solid gainsboro;
    z-index: 1;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.contenter img:hover{
    z-index: 2;
    position: relative;
    box-shadow: 15px 15px 20px rgba(50,50,50,0.4);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    width:auto;
    height:auto;
}
.img1{
    transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
}
.img2{
    transform: rotate(-50deg);
    -webkit-transform: rotate(-50deg);
}
.img3{
    transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
}
.img4{
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}
.img5{
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
}
.img6{
    transform: rotate(12deg);
    -webkit-transform: rotate(12deg);
}
.img7{
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}
.img8{
    transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
}
.img9{
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
}
.img10{
    transform: rotate(11deg);
    -webkit-transform: rotate(11deg);
}
.img11{
    transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
}
.img12{
    transform: rotate(18deg);
    -webkit-transform: rotate(18deg);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值