关键技术点：
* box-shadow
* 给元素的边框增加阴影的效果
* box-shadow：x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]
* position
* 给元素定位，主要用到绝对定位
* z-index
* 设置元素的上下层显示顺序
* z-index：整数
* transform
* 使元素变形的属性，其配合rotate（旋转角度）、scale（缩放倍数）、skew（扭曲元素）等参数一起使用
* transform：rotate
* transition
* 设置元素由样式1转变到样式2的过程所需要的时间
* transition：duration
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>CSS3照片墙
</title>
<style type="text/css">
body{
background:#eee;
}
h1{
text-align: center;
}
.container{
width:960px;
height: 450px;
margin:60px auto;
position:relative;
}
img{
padding:10px 10px 15px;
background:#fff;
border:1px solid white;
position: absolute;
transition: 1s;
}
img:hover{
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
transform:scale(1.2);
box-shadow:10px 10px 15px #ccc;
z-index: 100;
}
.pic1{
top:50px;
left:200px;
-webkit-transform:rotate(-25deg);
-moz-transform:rotate(-25deg);
transform:rotate(-25deg);
}
.pic2{
top:50px;
left:400px;
-webkit-transform:rotate(25deg);
-moz-transform:rotate(25deg);
transform:rotate(25deg);
}
</style>
</head>
<body>
<h1> 照片墙制作
</h1>
<div class="container">
<img class="pic1" src="images/mm1.jpg" />
<img class="pic2" src="images/mm2.jpg" />
</div>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-971910.html
