你好，欢迎来到Amy的第一篇博客呀~ 此博客纯属个人原创哦~ 前些天在公开课上讲过一个类似于拍立得的照片特效，然后在一个页面上放了多张就形成了一个照片墙，效果如下： 鼠标悬浮到照片上还可以将图片进行缩放，底部文字也可以进行更改哦~现在我们就来详细讲解一下吧

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

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

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

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

对了，这里要告诉大家的是：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之中。它用于在元素之前或者元素之后加上一些内容。

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

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

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

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