在很多個人網站，我們經常可以看到帶有個性的圖片牆效果。在這一節我們就先來給大家講解一下如何使用之前學習到的CSS3知識來實現個性圖片牆效果。
實現代碼如下：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3實現個性圖片牆</title>
<style type="text/css">
#container
{
position:relative;
width:800px;
height:600px;
margin:0 auto;
background-image:url("../App_images/lesson/run_css3/bg.jpg");
}
img
{
position:absolute;
padding:10px;
background-color:White;
}
img:Hover
{
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#container img:first-child
{
left:80px; top:60px; -webkit-transform:rotate(30deg);
}
#container img:nth-child(2)
{
left:240px; top:60px; -webkit-transform:rotate(-30deg);
}
#container img:nth-child(3)
{
left:420px; top:60px; -webkit-transform:rotate(30deg);
}
#container img:nth-child(4)
{
left:100px; top:240px; -webkit-transform:rotate(-30deg);
}
#container img:nth-child(5)
{
left:270px; top:240px; -webkit-transform:rotate(0);
}
#container img:last-child
{
left:420px; top:240px;-webkit-transform:rotate(30deg);
}
</style>
</head>
<body>
<div id="container">
<img src="../App_images/lesson/run_css3/haizei1.png" alt=""/>
<img src="../App_images/lesson/run_css3/haizei2.png" alt=""/>
<img src="../App_images/lesson/run_css3/haizei3.png" alt=""/>
<img src="../App_images/lesson/run_css3/haizei4.png" alt=""/>
<img src="../App_images/lesson/run_css3/haizei5.png" alt=""/>
<img src="../App_images/lesson/run_css3/haizei6.png" alt=""/>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡主要用到了CSS3旋轉來實現圖片擺放，然後使用box-shadow屬性來設置鼠標移到圖片上時的陰影效果。並且這裡還用到了CSS3結構偽類選擇器。
上面做的效果可能有點不敢恭維，不過方法已經教給大家了。大家可以自行設計，打造屬於自己的“個性圖片牆”。