照片牆效果

時間 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