【CSS】骨架屏 Skeleton 效果

?標簽用來顯示標題，而另一個?

，class?名為?description，就用來顯示內(nèi)文。

CSS 的部分

去到 CSS 的部份，先處理好這張卡的樣式。加入?body?選擇器，設定背景顏色是淺灰色，字體是?Helvetica，文字大小是?15px，然后用 Flexbox 的方式將內(nèi)容上下左右居中。

加入?.card?選擇器，設定寬度是?320px，背景顏色設定為白色，這樣背景的淺灰色就能夠襯托出這個白色。加一點圓角，設定為?6px，由于在里面會加入圖片，為了讓圖片都可以套用上圓角，設定?overflow?為?hidden，再加入陰影，很輕微就可以了。

然后設定圖片容器的樣式，加入?.image?選擇器，設定高度為?200px。然后里面的圖片，加入?.image img?選擇器，設定?display?為?block，寬度是?100%。高度就繼承自父容器，設定為?inherit，為了保持圖片的比例，將?object-fit?設定為?cover。

再來內(nèi)容的部份，加入?.content?選擇器，設定?padding?為上下?2rem，左右?1.8rem；加入?h4?選擇器，設定標題的樣式，margin?設定為上左右都是?0，下是?1rem；文字大小和行距都設定為?1.5rem。

最后就是內(nèi)文，加入?.description?選擇器，文字大小設定為?1rem，行距設定為?1.4rem，現(xiàn)在這張卡的樣式就完成了。

制作骨架屏

回到 HTML 的部份，復制多一張卡片，不過清空里面的圖片和文字，以及加入一個名為?loading?的?class，我們會將骨架屏的效果套用到這張卡片上。

去到 CSS 的部份，將?body?里面的?justify-content?的設定值，更改為?space-evenly，這樣兩張卡就可平均分配空白位置。然后由于稍后會于多處用到同一種灰色，我會將這個灰色定義為 CSS 變量，加入?:root?選擇器，設定?--loading-grey?為淺灰色。

我們有三個位置需要加入灰色的骨架，分別是圖片、標題和內(nèi)文。所以將這三個選擇器的背景顏色都設定為淺灰色。

而標題和內(nèi)文需要個別設定一些樣式，加入?.loading h4?選擇器，設定標題位置的樣式，將?min-height?設定為?1.6rem，圓角設定為?4px。再加入?.loading .description?選擇器，設定內(nèi)文位置的樣式，這里的高度設定多一點，min-height?設定為?4rem，圓角同樣設定為?4px。

動畫的部分

現(xiàn)在基本上完成了一個靜態(tài)的骨架屏了，接下來處理動畫的部份。骨架屏的動畫是好像一條光束由左至右掃過去的，所以我會將背景設定為漸層顏色。加入?background，設定為?linear-gradient()，角度傾斜一點，設定為?100deg；然后由全透明的白色，位置在?40%；漸變?yōu)榘胪该鞯陌咨恢迷?50%；再到全透明的白色，位置在?60%。之后再補上基礎的背景顏色，淺灰色，現(xiàn)在就可以看到這條光束了。

那么要怎樣進行動畫呢，我會先將這個背景的寬度，拉成兩倍大小，設定為?200%，高度維持是?100%。這樣就可以通過?background-position?控制背景的位移，從而達到掃光的效果。現(xiàn)在當?background-position-x?設定為?100%，光的部份會在左邊，而設定為?0%?的話，光的部份會在右邊，所以由大的數(shù)字改變到小的數(shù)字就可以實現(xiàn)左至右的掃光。不過這還不夠，我們需要左右預留一些緩沖，才可以將光由外面掃入，所以先把它改為?120%。

然后定義一個?@keyframes?名為?loading，加入?to?的區(qū)塊，設定?background-position-x?為?-20%。加入動畫的設定，設定為?1?秒，動畫名稱是?loading，加速度是?ease-in-out，重覆次數(shù)是無限?infinite。

可以看到掃光效果已出現(xiàn)了，我想它掃入的時候快一點，間隔時間稍多一點，可以直接將原來的?background-position-x?更改為更大的值，例如?180%，這樣背景就因為需要移動更長的距離，從而達到效果。

最后，再來一點微調(diào)，光束是斜的，如何可以做到三個灰色位置的光束看起來是同一條呢？只需要稍為延遲一下標題和內(nèi)文的動劃開始時間就可以了，設定標題的?animation-delay?為?.05s，而內(nèi)文的?animation-delay?為?.06s。

我們來看看這個案例的完成效果

這里介紹了用 CSS 編寫骨架屏效果的方法，大家在實際應用中，只需要在數(shù)據(jù)載入的時候，為容器加上?loading?這個?class；而在數(shù)據(jù)載入完成后，將數(shù)據(jù)顯示到指定位置，并且將?loading?這個?class?移除即可，在這里就不再展開介紹了。以上，就是今期要介紹的全部內(nèi)容。

---

這個案例的源代碼在 https://codepen.io/stevenlei/pen/NWRBYJP

來自：掘金，作者：CodingStartup

鏈接：https://juejin.cn/post/6916748944789733390