html 照片墙
代码很简单,首先准备一些照片放入一个文件夹。
之后上代码,难度不大,可以直接复制粘贴使用:
html文件:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像墙</title>
<link type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<img class="pic pic0" src="img/0.jpg" >
<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" >
</div>
</body>
</html>
css文件:
*{margin:0;padding: 0;
}body{background-color: #eeeeee;
}.container{width: 1000px;height: 450px;margin:60px auto;position: relative;
}.container img{padding: 10px 10px 15px ;background:white;border: 1px solid #ddd;box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
}.pic{width: 200px;margin-right: 1%;
}.container>img:hover{opacity:0.6;
}
效果:
强制分割线
如果说你要给你的照片墙添加一些特效的话,也ok,那就用下面这个css文件
*{margin:0;padding: 0;
}body{background-color: #eeeeee;
}.container{width: 1000px;height: 450px;margin:60px auto;position: absolute;
}.pic1{left: 400px;top: 0;transform:rotate(-5deg);-webkit-transform:rotate(-5deg);
}.pic2{left: 200px;top: 10px;transform:rotate(-20deg);-webkit-transform:rotate(-20deg);
}
.pic3{top: 220px;right: 80px;transform:rotate(5deg);-webkit-transform:rotate(5deg);
}.pic4{top: 100px;left: 300px;transform:rotate(-10deg);-webkit-transform:rotate(-10deg);
}.pic5{top: 20px;right: 150px;transform:rotate(-10deg);-webkit-transform:rotate(-10deg);
}
.pic6{left: 10px;top: 0;transform:rotate(10deg);-webkit-transform:rotate(10deg);
}.pic7{left: 850px;top: 0;transform:rotate(20deg);-webkit-transform:rotate(20deg);
}
.pic0{bottom: -20px;top: 190px;transform:rotate(5deg);-webkit-transform:rotate(-15deg);
}.container img{padding: 10px 10px 15px;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;position: absolute;z-index: 1;
}.pic{width: 200px;margin-right: 1%;
}.container>img:hover{box-shadow: 15px 15px 20px rgba(50,50,50,0.4);transform:rotate(0deg) scale(2.20);-webkit-transform:rotate(0deg) scale(1.50);z-index: 1000;
}
效果: