CSS3制作的照片墙

最新推荐文章于 2023-06-28 16:25:54 发布

执着更专业

最新推荐文章于 2023-06-28 16:25:54 发布

阅读量637

点赞数

分类专栏： html 文章标签： css3 html 图片

本文链接：https://blog.csdn.net/pangchengyong0724/article/details/52065766

版权

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

照片墙效果

图片自己弄

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);
}

执着更专业

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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="
复制链接

扫一扫