照片墙设计与制作

最新推荐文章于 2024-07-27 23:01:21 发布

打工人小飞

最新推荐文章于 2024-07-27 23:01:21 发布

阅读量1.6k

点赞数 1

分类专栏： web前端文章标签： HTML5 CSS3 照片墙盒子模型 web前端

本文链接：https://blog.csdn.net/huangfei711/article/details/47450309

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

    在很多对图片的展示网站上，尤其是针对于照片展示的网站，美观的照片墙效果还是很常见的。所以怎样可以制作一个美观的照片墙有了很大的需求。

HTML5代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <img class="pic pic1" src="img/1.jpg">
    <img class="pic pic2" src="img/2.jpg">
    <img class="pic pic3" src="img/3.jpg">
    <img class="pic pic4" src="img/4.jpg">
    <img class="pic pic5" src="img/5.jpg">
    <img class="pic pic6" src="img/6.jpg">
    <img class="pic pic7" src="img/7.jpg">
    <img class="pic pic8" src="img/8.jpg">
    <img class="pic pic9" src="img/9.jpg">
</div>
</body>
</html>

CSS3代码：

/*公有属性*/
*{
    margin: 0;/*外边距为0*/
    padding: 0;/*内边距为0*/
}
/*body初始化效果*/
body{
    background-color: #eeeeee;/*设置背景颜色为*/
}
/*容器整体设置*/
.container{
    width: 1000px;/*整体照片盒子宽度*/
    height: 450px;/*整体照片盒子高度*/
    margin: 90px;/*整体照片盒子外边距*/
    position: relative;/*整体照片盒子采用相对定位，对象不可层叠*/
}
/*每张图片的大小设置*/
.pic{
    width: 160px;
}
/*鼠标经过时每个图片盒子效果设置*/
.container img:hover{
    box-shadow: 10px 10px 15px rgba(50,50,50,0.4);/*阴影效果设置*/
    transform: rotate(0deg) scale(1.20);/*鼠标经过时角度还原并放大1.2倍*/
    -webkit-transform: rotate(0deg) scale(1.20);/*考虑兼容性问题*/
    z-index: 2;
}
/*每张图片加上边框效果*/
.container img{
    padding: 10px 10px 15px 10px;/*每张图片内边距（顺时针顺序）*/
    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;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;/*慢速开始过渡效果，历时0.5秒*/
    position:absolute;/*每张图片绝对定位*/
    z-index: 1;/*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
}

.pic1{
    left: 400px;
    top: 0;
    transform: rotate(-5deg);/*逆时针旋转5度*/
    -webkit-transform: rotate(-5deg);/*考虑浏览器兼容性（这里只考虑chrome）*/
}

.pic2{
    left: 200px;
    top: 0;
    transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
}

.pic3{
    bottom: 100px;
    right: 100px;
    transform: rotate(5deg);/*顺时针旋转5度*/
    -webkit-transform: rotate(5deg);
}

.pic4{
    bottom: 0px;
    left: 300px;
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}

.pic5{
    bottom: 0px;
    top: 0;
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}

.pic6{
    left: 600px;
    top: 0;
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
}

.pic7{
    left: 850px;
    top: 0;
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
}

.pic8{
    left: -20px;
    top: 150px;
    transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
}

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