您的位置：首页 > 其它

照片墙设计与制作

2015-08-12 20:28 513 查看 
在很多对图片的展示网站上，尤其是针对于照片展示的网站，美观的照片墙效果还是很常见的。所以怎样可以制作一个美观的照片墙有了很大的需求。
HTML5代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<img class="pic pic1" src="img/1.jpg">
<img class="pic pic2" src="img/2.jpg">
<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.jpg">
<img class="pic pic7" src="img/7.jpg">
<img class="pic pic8" src="img/8.jpg">
<img class="pic pic9" src="img/9.jpg">
</div>
</body>
</html>
CSS3代码：
/*公有属性*/
*{
margin: 0;/*外边距为0*/
padding: 0;/*内边距为0*/
}
/*body初始化效果*/
body{
background-color: #eeeeee;/*设置背景颜色为*/
}
/*容器整体设置*/
.container{
width: 1000px;/*整体照片盒子宽度*/
height: 450px;/*整体照片盒子高度*/
margin: 90px;/*整体照片盒子外边距*/
position: relative;/*整体照片盒子采用相对定位，对象不可层叠*/
}
/*每张图片的大小设置*/
.pic{
width: 160px;
}
/*鼠标经过时每个图片盒子效果设置*/
.container img:hover{
box-shadow: 10px 10px 15px rgba(50,50,50,0.4);/*阴影效果设置*/
transform: rotate(0deg) scale(1.20);/*鼠标经过时角度还原并放大1.2倍*/
-webkit-transform: rotate(0deg) scale(1.20);/*考虑兼容性问题*/
z-index: 2;
}
/*每张图片加上边框效果*/
.container img{
padding: 10px 10px 15px 10px;/*每张图片内边距（顺时针顺序）*/
background: white;/*每张图片背景色*/
border: 1px solid #ddd;/*每张图片的边框属性*/
box-shadow: 2px 2px 3px rgba(50,50,50,0.4);/*设置阴影效果和颜色以及透明度*/
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;/*慢速开始过渡效果，历时0.5秒*/
position:absolute;/*每张图片绝对定位*/
z-index: 1;/*z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
}

.pic1{
left: 400px;
top: 0;
transform: rotate(-5deg);/*逆时针旋转5度*/
-webkit-transform: rotate(-5deg);/*考虑浏览器兼容性（这里只考虑chrome）*/
}

.pic2{
left: 200px;
top: 0;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
}

.pic3{
bottom: 100px;
right: 100px;
transform: rotate(5deg);/*顺时针旋转5度*/
-webkit-transform: rotate(5deg);
}

.pic4{
bottom: 0px;
left: 300px;
transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}

.pic5{
bottom: 0px;
top: 0;
transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}

.pic6{
left: 600px;
top: 0;
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
}

.pic7{
left: 850px;
top: 0;
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
}

.pic8{
left: -20px;
top: 150px;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}

.pic9{
left: 550px;
top: 90px;
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航