超详细的纯CSS的照片墙特效

超详细的纯CSS的照片墙特效

你好，欢迎来到Amy的第一篇博客呀~ 此博客纯属个人原创哦~
前些天在公开课上讲过一个类似于拍立得的照片特效，然后在一个页面上放了多张就形成了一个照片墙，效果如下：

鼠标悬浮到照片上还可以将图片进行缩放，底部文字也可以进行更改哦~现在我们就来详细讲解一下吧

注意事项

个人使用的开发工具：Hbuilder
（小伙伴们注意哦~我们前端并不是那么依赖开发工具用记事本都可以写，所以这里使用什么编辑器看个人习惯啦）
浏览器：Google Chrome （谷歌）

网页基本布局

使用Hbuilder的懒人的快捷键：

再按下‘tab’键即可出现。
因为我们放的是多张照片所以直接采取的无序列表的方式，然后a标签包裹图片呢是因为我们可以对其进行设置，通过在href属性这里加入地址使得页面跳转，后面我们也可以让title的值在白框底部显示。我们其实可以依据每张照片是什么来添加不一样的title值的哦~

样式设置

html,body,ul{
	margin: 0;
	padding: 0;
}

这样设置是因为浏览器默认会产生内边距和外边距，不设置会影响整个页面的美观与后面的布局。那么有的同学可能又会问了为什么不直接用*通配符，这里呢，给大家说下如果采用通配符做全局适配，我们需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，所以我们实际开发中不会那样写的。

ul,li{
	list-style: none;
}

因为我们的无序列表下面的li会有默认的自带的一个小圆点的样式，我们这里是对其样式进行去除。

/*将每个li标签转化成行元素  因为我们到时候是将这些照片并排来排列显示  */
ul li{
	display: inline;
}
/*再给ul设置一下宽度值和margin   margin四个值依次是上右下左 顺时针方向*/
ul{
	width: 970px;
	margin:0 0 18px 10px ;
}
/*然后可以设置图片宽度，在没设置之前图片是占满了全屏*/
ul img{
	display: block;/*转为块元素*/
	width: 190px;
	margin-bottom: 12px;
}
/*再接着给图片设置边框  注意我们这里是用a标签包裹了img图片  所以我们如果要对图片进行留白边操作的话就设置a标签*/
ul a{
	background-color: #FFFFFF;
	display: inline;/*转为行元素*/
	float: left;/*左浮动*/
	width: auto;
	margin: 0 0 27px 30px;
	padding: 10px 10px 15px;/*上内边距是 10px; 右、左内边距是10px;下内边距是 15px*/
	text-decoration: none;
	font-size: 17px;
	color: #333333;
	/*这里设置的box-shadow四个值意思是：水平位移0;垂直位移3px;模糊半径6px;阴影颜色rgba(0,0,0,0.25)*/
	box-shadow: 0 3px 6px rgba(0,0,0,0.25) ;
	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.25);
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,0.25);
	-o-box-shadow: 0 3px 6px rgba(0,0,0,0.25);
	-ms-box-shadow: 0 3px 6px rgba(0,0,0,0.25);
}

对了，这里要告诉大家的是：rgba括号中前3个数字代表着 red green blue三种颜色的rgb值，0-255，最后一个是设定这个颜色的透明度即alpha值。范围从0到1，越接近1，代表透明度越低。然后我们还要考虑到浏览器的一个兼容性。-webkit代表谷歌【chrome】/苹果【safari】内核识别码；-moz代表火狐【firefox】内核识别码；-o代表欧朋【opera】内核识别码；-ms代表【ie】内核识别码。
到这一步我们已经完成了给每一张图片添加白框的设置了。然后我们再来在白框底部获取到之前在a标签里面写的title里面的值，让其在页面上显示我们就可以通过content: attr(title);来获取，但是呢，我们要注意的是content只能使用在:after和:before之中。它用于在元素之前或者元素之后加上一些内容。

ul li a:after{
	content: attr(title);
}

我们的照片墙到这里已经差不多了，就是方方正正的显示了。接着我们为了让它好看点再来进行一些设置，比方说倾斜角度，以及鼠标悬浮在上面有缩放的动画效果。

ul li:nth-child(even) a {
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
}
ul li:nth-child(5n) a {
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	transform: rotate(5deg);
	position: relative;
	right: 5px;
}
ul li:nth-child(8n) a {
	position: relative;
	top: 8px;
	right: 5px;
}
ul li:nth-child(11n) a {
	position: relative;
	top: 3px;
	right: -5px;
}

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型（第一个子元素的下标是 1）。even 用于匹配下标是偶数的子元素的指定。这里你可以依据你自己想要的图片来设置指定倾斜的哦~
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。具体如何倾斜我们可以通过下面这个链接来了解详情。
link.
然后再想到鼠标悬浮在图片上面时有个图片放大的动画效果
所以可以：通过a标签的hover这样一个伪类来设置。

ul li a:hover{
   transform: scale(1.25);
   -webkit-transform: scale(1.25);
   -moz-transform: scale(1.25);
   -ms-transform: scale(1.25);
   -o-transform: scale(1.25);
   /*为了使放大效果更佳美观  所以我们也可以将鼠标悬停时的阴影（透明度这一块）加点改变*/
   box-shadow: 0 3px 6px rgba(0,0,0,0.25) ;
   -webkit-box-shadow: 0 3px 6px rgba(0,0,0,5);
   -moz-box-shadow: 0 3px 6px rgba(0,0,0,5);
   -o-box-shadow: 0 3px 6px rgba(0,0,0,5);
   -ms-box-shadow: 0 3px 6px rgba(0,0,0,5);
}

上述代码给大家讲一点是：scale(x,y) 对元素进行缩放，X表示水平方向缩放的倍数 |，Y表示垂直方向的缩放倍数。Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。

好了，我们前端一个简单的纯CSS的照片墙效果就出来了。你学会了嘛？