照片墙效果

最新推荐文章于 2023-09-21 14:05:49 发布

weixin_34378922

最新推荐文章于 2023-09-21 14:05:49 发布

阅读量180

点赞数

文章标签：游戏 python

原文链接：https://my.oschina.net/u/3038594/blog/854329

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

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

	<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：


.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);
}

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