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

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

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

注意事项

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

网页基本布局

《超详细的纯CSS的照片墙特效》
使用Hbuilder的懒人的快捷键:
《超详细的纯CSS的照片墙特效》
再按下‘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的照片墙效果就出来了。你学会了嘛?

    原文作者:Amy_Z
    原文地址: https://blog.csdn.net/Amy_Z/article/details/98780059
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞