超詳細(xì)的純CSS的照片墻特效

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

鼠標(biāo)懸浮到照片上還可以將圖片進(jìn)行縮放，底部文字也可以進(jìn)行更改哦~現(xiàn)在我們就來詳細(xì)講解一下吧

注意事項(xiàng)

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

網(wǎng)頁基本布局

使用Hbuilder的懶人的快捷鍵：

再按下‘tab’鍵即可出現(xiàn)。
因?yàn)槲覀兎诺氖嵌鄰堈掌灾苯硬扇〉臒o序列表的方式，然后a標(biāo)簽包裹圖片呢是因?yàn)槲覀兛梢詫?duì)其進(jìn)行設(shè)置，通過在href屬性這里加入地址使得頁面跳轉(zhuǎn)，后面我們也可以讓title的值在白框底部顯示。我們其實(shí)可以依據(jù)每張照片是什么來添加不一樣的title值的哦~

樣式設(shè)置

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

這樣設(shè)置是因?yàn)闉g覽器默認(rèn)會(huì)產(chǎn)生內(nèi)邊距和外邊距，不設(shè)置會(huì)影響整個(gè)頁面的美觀與后面的布局。那么有的同學(xué)可能又會(huì)問了為什么不直接用*通配符，這里呢，給大家說下如果采用通配符做全局適配，我們需要把所有的標(biāo)簽都遍歷一遍，當(dāng)網(wǎng)站較大時(shí)，樣式比較多，這樣寫就大大的加強(qiáng)了網(wǎng)站運(yùn)行的負(fù)載，會(huì)使網(wǎng)站加載的時(shí)候需要很長一段時(shí)間，所以我們實(shí)際開發(fā)中不會(huì)那樣寫的。

ul,li{list-style: none; }

因?yàn)槲覀兊臒o序列表下面的li會(huì)有默認(rèn)的自帶的一個(gè)小圓點(diǎn)的樣式，我們這里是對(duì)其樣式進(jìn)行去除。

/*將每個(gè)li標(biāo)簽轉(zhuǎn)化成行元素 因?yàn)槲覀兊綍r(shí)候是將這些照片并排來排列顯示 */ ul li{display: inline; } /*再給ul設(shè)置一下寬度值和margin margin四個(gè)值依次是上右下左 順時(shí)針方向*/ ul{width: 970px;margin:0 0 18px 10px ; } /*然后可以設(shè)置圖片寬度，在沒設(shè)置之前圖片是占滿了全屏*/ ul img{display: block;/*轉(zhuǎn)為塊元素*/width: 190px;margin-bottom: 12px; } /*再接著給圖片設(shè)置邊框 注意我們這里是用a標(biāo)簽包裹了img圖片 所以我們?nèi)绻獙?duì)圖片進(jìn)行留白邊操作的話就設(shè)置a標(biāo)簽*/ ul a{background-color: #FFFFFF;display: inline;/*轉(zhuǎn)為行元素*/float: left;/*左浮動(dòng)*/width: auto;margin: 0 0 27px 30px;padding: 10px 10px 15px;/*上內(nèi)邊距是 10px; 右、左內(nèi)邊距是10px;下內(nèi)邊距是 15px*/text-decoration: none;font-size: 17px;color: #333333;/*這里設(shè)置的box-shadow四個(gè)值意思是：水平位移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); }

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

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

我們的照片墻到這里已經(jīng)差不多了，就是方方正正的顯示了。接著我們?yōu)榱俗屗每袋c(diǎn)再來進(jìn)行一些設(shè)置，比方說傾斜角度，以及鼠標(biāo)懸浮在上面有縮放的動(dòng)畫效果。

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 個(gè)子元素，不論元素的類型（第一個(gè)子元素的下標(biāo)是 1）。even 用于匹配下標(biāo)是偶數(shù)的子元素的指定。這里你可以依據(jù)你自己想要的圖片來設(shè)置指定傾斜的哦~
transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。具體如何傾斜我們可以通過下面這個(gè)鏈接來了解詳情。
link.
然后再想到鼠標(biāo)懸浮在圖片上面時(shí)有個(gè)圖片放大的動(dòng)畫效果
所以可以：通過a標(biāo)簽的hover這樣一個(gè)偽類來設(shè)置。

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);/*為了使放大效果更佳美觀 所以我們也可以將鼠標(biāo)懸停時(shí)的陰影（透明度這一塊）加點(diǎn)改變*/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); }

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

好了，我們前端一個(gè)簡單的純CSS的照片墻效果就出來了。你學(xué)會(huì)了嘛？

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。