使用html+css實現一個個人照片牆
今天我們來簡單的實現一個個人照片牆
照片呈不規則的角度擺放，當滑鼠放在照片上時，照片會放大；
滑鼠離開照片時，照片回到原來的狀態。
其實只要用CSS3的一些屬性完全就可以實現這樣的效果，無須一行js程式碼~~
程式碼分為兩部分
HTML內容其實很簡單，就是在一個div裡面放上幾個圖片
<div>
<h1>人生就是搞事
</h1>
<p id=ji>每天睡覺的時候問自己：今天一天過得不錯吧？夢想是不是更遠了？</p>
</div>
<div>
<div class="mm" align=center>
<img src=1.jpg / width=250px>
<img src=2.jpg / width=270px>
<img src=3.jpg / width=260px>
<img src=4.jpg / width=290px>
<img src=5.jpg / width=290px>
<img src=6.jpg / width=250px>
<img src=7.jpg / width=250px>
<img src=8.jpg / width=290px>
<img src=9.jpg / width=300px>
<img src=10.jpg / width=300px>
</div>
接下來就是CSS部分的程式碼
h1{color:#CFB53B;font-family:方正清刻本悅宋;text-align:center;}
body{background:url(bg.jpg)top center no-repeat;background-size:cover;}
#ji{font-family:"Courier New", Courier, monospace;
font-size:24px;text-align:center;color:#6B4226;}
.con{
width: 960px;
height: 500px;
margin:100px auto;
position: relative;}
img{
position:absolute;
padding: 10px 10px 15px;
background:#fff;
border:1px solid #ddd;
cursor:pointer;
}
img:nth-of-type(1){transform:rotate(20deg);z-index:2;
left:10%;
top:180px;}
img:nth-of-type(2){transform:rotate(10deg);z-index:4;
left:25%;
top:180px;}
img:nth-of-type(3){transform:rotate(-10deg);z-index:1;
left:40%;
top:180px;}
img:nth-of-type(4){transform:rotate(5deg);z-index:2;
left:55%;
top:180px;}
img:nth-of-type(5){transform:rotate(10deg);z-index:3;
left:70%;
top:180px;}
img:nth-of-type(6){transform:rotate(-5deg);z-index:1;
left:10%;
top:500px;}
img:nth-of-type(7){transform:rotate(10deg);z-index:2;
left:25%;
top:500px;}
img:nth-of-type(8){transform:rotate(20deg);z-index:1;
left:40%;
top:500px;}
img:nth-of-type(9){transform:rotate(10deg);z-index:4;
left:55%;
top:500px;}
img:nth-of-type(10){transform:rotate(-10deg);z-index:1;
left:70%;
top:500px;}
img:hover{
transform:scale(2,2);
transition:all 3s;
box-shadow: 10px 10px 15px #034663;
z-index:20
}
首先，為了照片牆美觀一些，我們在主體部分加入了一張背景圖片，使得整個介面不單調。
然後為照片牆的名稱加一些特殊字型和顏色，並使文字內容居中。
接下來就是照片的佈局和旋轉特效了，首先我們為每一個圖片設定一個position:absolute絕對定位
因為我們待會兒需要用到z-index來為圖片設定縮放和堆疊的效果，如果沒有絕對定位的話所有的圖片都會層疊在一起
為了沒個圖片設定 padding: 10px 10px 15px;（上下左右四個內邊距為10px)background設定白色，這樣每個圖片都
擁有了一個白色的邊框，然後設定游標樣式cursor，使cursor屬性值為pointer，當滑鼠放在圖片上將顯示手指樣式。
然後使用nth-of-type（n)選擇器來逐個選擇圖片，img:nth-of-type(1)代表選擇第一個圖片，以此類推，
使用transform:rotate()來為圖片設定一個旋轉角度，角度可以為負。
使用z-index:（）來設定圖片的堆疊屬性，也就是z軸
使用left:（）;top:（）來為圖片設定擺放位置，從程式碼可以看出，我們為前面五張圖片設定高度180px使其呈一列擺放
圖片間隔15%規律擺放，第二排圖片高度設定為500px，當然這裡的值並不固定，為了美觀或者個性也可以將圖片隨
意擺放於視窗某處。
接下來就是設定當滑鼠放在圖片上圖片放大的特效了，使用img:hover設定當滑鼠懸停圖片時
transform:scale(x,y);圖片進行縮放的比列x y可以不相等，我們這裡設定了放大2倍
transition:all ns;來規定完成這個動作所需要的時間，這裡我們設定時間為3s
box-shadow來為圖片設定陰影效果，其中水平陰影以及垂直陰影設定為必須，這裡我們設定水平與垂直為10px
模糊距離為15px，因為我們設定了hover,所在陰影效果只會在圖片放大之後才有效果
接下來依然設定z-index:（），這裡的值要大於前面每張圖片的值，這樣當圖片放大之後才會現在在螢幕前方
這樣呢我們一個簡單的照片牆就以及完成了
效果展示
