html代码:
照片墙css代码:
@charset "utf-8";
/**/
*{
/*全局初始化margin-外边距为0 padding-内边距为0*/
margin: 0;
padding: 0;
}
body{
background-image: url(../img/IMG_20150219_192345.jpg);
background-size: cover;
}
.photo-group img{
margin-top:10px ;
margin-left:10px ;
margin-bottom: 10px;
width: 300px;
/*border 边框*/
border: 5px solid chocolate;
/*圆角*/
border-radius: 15px;
/*阴影
参数1:水平阴影的位置
参数2:垂直阴影的位置
参数3:模糊的距离
参数4:阴影的尺寸
参数5:阴影的颜色与透明度
参数6:阴影的样式
* */
box-shadow:10px 10px 8px gray;
}
.photo-group{
width: 976px;
margin: 0 auto;
}
.photo-group img:hover{
box-shadow:0px 0px 0px;
transform: rotate(20deg) scale(1.2);
/*添加过渡效果*/
transition-duration: 0.5s;
}
.nav{
width: 150px;
margin: auto;
}
效果图:(整个过程是慢慢过渡出来了,没有生硬的感觉)