css 微信照片墙 |css做移动端底部导航带图标

本文将通过CSS技术来实现一种微信风格的照片墙。大家首先需要准备一组带有不同宽高比的图片，并给它们加上不同的Hover效果，使得鼠标移到照片上时，可以有不同的反应。

.img-item {
position: relative;
overflow: hidden;
transition: all .3s ease-in-out;
cursor: pointer;
}
.img-item img {
width: 100%;
height: 100%;
display: block;
transition: all .3s ease-in-out;
}
.img-item:before {
content: ' ';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, .5);
width: 100%;
height: 100%;
z-index: 2;
opacity: 0;
}
.img-item:hover:before {
opacity: 1;
}
.img-item:hover img {
transform: scale(1.1);
}

代码中，大家首先定义了一个.img-item类，该类定义了一些覆盖在图片上面的半透明黑色遮罩，并在鼠标移上去时出现。同时，也定义了图片的放大效果。

接下来，大家将所有的照片设置成瀑布流，并通过flex和column-count实现每列图片的自适应布局。

.img-wall {
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 1000px;
column-count: 4;
column-gap: 10px;
}
.img-item:nth-child(5n+1), .img-item:nth-child(5n+5) {
width: calc(100% - 10px);
height: calc(100% - 10px);
}
.img-item:nth-child(5n+2), .img-item:nth-child(5n+3), .img-item:nth-child(5n+4) {
width: calc(50% - 7.5px);
height: calc(50% - 7.5px);
}

代码中大家首先定义了一个.img-wall类，将照片放入该类中。然后通过设置column-count属性，使得照片自适应布局到每一列中，并通过设置width和height属性来挑选出5张照片中的第1和5张，和第2、3、4张等三种不同的照片大小和布局方式。

最后，大家通过以上的CSS效果实现了一种微信风格的照片墙，具有观赏性高，易于自适应布局等优点，让网页布局更加美观。