照片墙效果

时间 2020-01-22

原文原文链接

看到照片墙的效果，对着教程来了一遍。源码以下：css

html代码（注意在head里面引入css文件）：html

<body>
		<div class="contain">
			<img class="pic pic1" src="img/1.jpg"/>
			<img class="pic pic2" src="img/2.jpeg"/>
			<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.jpeg"/>
	</div>
	</body>

css：web

.contain{
	margin: 100px 300px;
	position: absolute;
}
.pic{
	width: 200px;
}
.contain img{
	padding: 10px 6px;
	background: #E3E3E3;
	border: 1px solid #737373;
	box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
	transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-webkit-transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in;
	position: relative;
	z-index: 1;
}
.contain img:hover{
	box-shadow: 10px 10px 15px rgba(50,50,50,0.4);
	transform: rotate(0deg) scale(1.2);
	-webkit-transform: rotate(0deg) scale(1.2);
	z-index:2;
}
.pic1{
	transform: rotate(-10deg);
	-webkit-transform: ratate(-10deg);
}
.pic2{
	transform: rotate(10deg);
	-webkit-transform: ratate(10deg);
}.pic3{
	transform: rotate(-3deg);
	-webkit-transform: ratate(-3deg);
}.pic4{
	transform: rotate(15deg);
	-webkit-transform: ratate(15deg);
}.pic5{
	transform: rotate(-12deg);
	-webkit-transform: ratate(-12deg);
}
.pic6{
	transform: rotate(-10deg);
	-webkit-transform: ratate(-10deg);
}

效果图（在鼠标移入图片上的时候图片放大且位置移入最上面）：chrome

技术亮点：浏览器

一、鼠标移入变大且以必定的速度慢慢变大变小：transition: all 0.5s ease-in；布局

0.5是变化的时间，时间越长，速度越慢。上面的代码是把各个浏览器的兼容性处理了，因此有不少种。3d

二、图片倾斜摆放： transform: rotate(10deg); -webkit-transform: ratate(10deg);code

可是transform兼容性极低，对于IE11如下的浏览器均没有效果，在chrome，firfox彻底适用。orm

三、图片跻身于最前面：z-index属性htm

这个属性很神奇，至关于把网页当成了三维的空间在处理，z是向用户眼前眼神的一轴，z-index值越大，就会显示在越前面，可是它必须依赖了position，无论是相对仍是绝对布局均可以，在鼠标移入的时候使当前z-index的值变大。