css3 图片展示墙

最新推荐文章于 2023-03-27 21:34:37 发布

Seven_Cld

最新推荐文章于 2023-03-27 21:34:37 发布

阅读量1.1k

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/Christine95/article/details/46883631

版权

为了进一步练习transform，看网上一个视频，用的他的图片，然后做出来了这个图片展示墙，开心。吐舌头效果如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
	<h1>图片展示墙</h1>
	<div class="container">
		<img class="pic1 pic" src="images/mm1.jpg" alt="" />
		<img class="pic2 pic" src="images/mm2.jpg" alt="" />
		<img class="pic3 pic" src="images/mm3.jpg" alt="" />
		<img class="pic4 pic" src="images/mm4.jpg" alt="" />
		<img class="pic5 pic" src="images/mm5.jpg" alt="" />
		<img class="pic6 pic" src="images/mm6.jpg" alt="" />
		<img class="pic7 pic" src="images/mm7.jpg" alt="" />
		<img class="pic8 pic" src="images/mm8.jpg" alt="" />
	</div>
</body>
</html>

下面是css.

body{
	background: #ccc;
}
h1{
	text-align: center;
}
.container{
	width: 960px;
	height: 500px;
	margin: auto;
	position: relative;
}
.pic{
	border: 1px solid #fff;
	padding: 5px 5px 15px;
	background: white;
	transition:all 1s ease-in-out;
}
.pic:hover{
	transform:scale(1.2);
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	-o-transform:scale(1.2);
	box-shadow: 10px 10px 5px rgba(0,0,0,0.3);
	z-index: 2;
}
.pic1{
	position: absolute;
	left:40px;
	top:40px;
	transform:rotate(20deg);
	-webkit-transform:rotate(20deg);
	-moz-transform:rotate(20deg);
	-o-transform:rotate(20deg);	
}
.pic2{
	position: absolute;
	left:160px;
	top:170px;
	transform:rotate(-30deg);
	-webkit-transform:rotate(-30deg);
	-moz-transform:rotate(-30deg);
	-o-transform:rotate(-30deg);	
}

后面的几个pic相同，只是旋转的角度不同，和定位不同。

几点收获：

1.更加明白z-index的用法，当hover上去的时候，对应的z-index：2；可以让隐藏在下面的元素到最上面。

2.关于transform:rotate和scale的用法。scale是缩放比例。

3.关于动画，transition.因为这里用了hover，即有事件触发，用transition,否则用animation.

4.关于相对定位，绝对定位，注意z-index必须要设置定位。

Seven_Cld

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 图片展示墙

为了进一步练习transform，看网上一个视频，用的他的图片，然后做出来了这个图片展示墙，开心。效果如下： Document 图片展示墙下面是css.body{ background: #ccc;}h1{ text-align: center;}.container{ w
复制链接

扫一扫