超詳細的純CSS的照片墻特效

你好，歡迎來到Amy的第一篇博客呀~ 此博客純屬個人原創哦~
前些天在公開課上講過一個類似于拍立得的照片特效，然后在一個頁面上放了多張就形成了一個照片墻，效果如下：

鼠標懸浮到照片上還可以將圖片進行縮放，底部文字也可以進行更改哦~現在我們就來詳細講解一下吧

注意事項

個人使用的開發工具：Hbuilder
（小伙伴們注意哦~我們前端并不是那么依賴開發工具用記事本都可以寫，所以這里使用什么編輯器看個人習慣啦）
瀏覽器：Google Chrome （谷歌）

網頁基本布局

使用Hbuilder的懶人的快捷鍵：

再按下‘tab’鍵即可出現。
因為我們放的是多張照片所以直接采取的無序列表的方式，然后a標簽包裹圖片呢是因為我們可以對其進行設置，通過在href屬性這里加入地址使得頁面跳轉，后面我們也可以讓title的值在白框底部顯示。我們其實可以依據每張照片是什么來添加不一樣的title值的哦~

樣式設置

html,body,ul{margin: 0;padding: 0; }

這樣設置是因為瀏覽器默認會產生內邊距和外邊距，不設置會影響整個頁面的美觀與后面的布局。那么有的同學可能又會問了為什么不直接用*通配符，這里呢，給大家說下如果采用通配符做全局適配，我們需要把所有的標簽都遍歷一遍，當網站較大時，樣式比較多，這樣寫就大大的加強了網站運行的負載，會使網站加載的時候需要很長一段時間，所以我們實際開發中不會那樣寫的。

ul,li{list-style: none; }

因為我們的無序列表下面的li會有默認的自帶的一個小圓點的樣式，我們這里是對其樣式進行去除。

/*將每個li標簽轉化成行元素 因為我們到時候是將這些照片并排來排列顯示 */ ul li{display: inline; } /*再給ul設置一下寬度值和margin margin四個值依次是上右下左 順時針方向*/ ul{width: 970px;margin:0 0 18px 10px ; } /*然后可以設置圖片寬度，在沒設置之前圖片是占滿了全屏*/ ul img{display: block;/*轉為塊元素*/width: 190px;margin-bottom: 12px; } /*再接著給圖片設置邊框 注意我們這里是用a標簽包裹了img圖片 所以我們如果要對圖片進行留白邊操作的話就設置a標簽*/ ul a{background-color: #FFFFFF;display: inline;/*轉為行元素*/float: left;/*左浮動*/width: auto;margin: 0 0 27px 30px;padding: 10px 10px 15px;/*上內邊距是 10px; 右、左內邊距是10px;下內邊距是 15px*/text-decoration: none;font-size: 17px;color: #333333;/*這里設置的box-shadow四個值意思是：水平位移0;垂直位移3px;模糊半徑6px;陰影顏色rgba(0,0,0,0.25)*/box-shadow: 0 3px 6px rgba(0,0,0,0.25) ;-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.25);-moz-box-shadow: 0 3px 6px rgba(0,0,0,0.25);-o-box-shadow: 0 3px 6px rgba(0,0,0,0.25);-ms-box-shadow: 0 3px 6px rgba(0,0,0,0.25); }

對了，這里要告訴大家的是：rgba括號中前3個數字代表著 red green blue三種顏色的rgb值，0-255，最后一個是設定這個顏色的透明度即alpha值。范圍從0到1，越接近1，代表透明度越低。然后我們還要考慮到瀏覽器的一個兼容性。-webkit代表谷歌【chrome】/蘋果【safari】內核識別碼；-moz代表火狐【firefox】內核識別碼；-o代表歐朋【opera】內核識別碼；-ms代表【ie】內核識別碼。
到這一步我們已經完成了給每一張圖片添加白框的設置了。然后我們再來在白框底部獲取到之前在a標簽里面寫的title里面的值，讓其在頁面上顯示我們就可以通過content: attr(title);來獲取，但是呢，我們要注意的是content只能使用在:after和:before之中。它用于在元素之前或者元素之后加上一些內容。

ul li a:after{content: attr(title); }

我們的照片墻到這里已經差不多了，就是方方正正的顯示了。接著我們為了讓它好看點再來進行一些設置，比方說傾斜角度，以及鼠標懸浮在上面有縮放的動畫效果。

ul li:nth-child(even) a {-webkit-transform: rotate(2deg);-moz-transform: rotate(2deg);-ms-transform: rotate(2deg);transform: rotate(2deg); } ul li:nth-child(5n) a {-webkit-transform: rotate(5deg);-moz-transform: rotate(5deg);-ms-transform: rotate(5deg);transform: rotate(5deg);position: relative;right: 5px; } ul li:nth-child(8n) a {position: relative;top: 8px;right: 5px; } ul li:nth-child(11n) a {position: relative;top: 3px;right: -5px; }

:nth-child(n) 選擇器匹配屬于其父元素的第 N 個子元素，不論元素的類型（第一個子元素的下標是 1）。even 用于匹配下標是偶數的子元素的指定。這里你可以依據你自己想要的圖片來設置指定傾斜的哦~
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。具體如何傾斜我們可以通過下面這個鏈接來了解詳情。
link.
然后再想到鼠標懸浮在圖片上面時有個圖片放大的動畫效果
所以可以：通過a標簽的hover這樣一個偽類來設置。

ul li a:hover{transform: scale(1.25);-webkit-transform: scale(1.25);-moz-transform: scale(1.25);-ms-transform: scale(1.25);-o-transform: scale(1.25);/*為了使放大效果更佳美觀 所以我們也可以將鼠標懸停時的陰影（透明度這一塊）加點改變*/box-shadow: 0 3px 6px rgba(0,0,0,0.25) ;-webkit-box-shadow: 0 3px 6px rgba(0,0,0,5);-moz-box-shadow: 0 3px 6px rgba(0,0,0,5);-o-box-shadow: 0 3px 6px rgba(0,0,0,5);-ms-box-shadow: 0 3px 6px rgba(0,0,0,5); }

上述代碼給大家講一點是：scale(x,y) 對元素進行縮放，X表示水平方向縮放的倍數 |，Y表示垂直方向的縮放倍數。Y是一個可選參數，沒有設置的話，則表示X，Y兩個方向的縮放倍數是一樣的。并以X為準。

好了，我們前端一個簡單的純CSS的照片墻效果就出來了。你學會了嘛？

總結

以上是生活随笔為你收集整理的超详细的纯CSS的照片墙特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。