Facebook如何生成動畫佔位符新聞項目？

Question

Facebook有一個「加載」屏幕，在等待下載所有內容時以特定方式進行動畫處理。顏色從灰色變爲淺灰色

我查看了所有下載的圖像，但無法找到它，所以我認爲這是一個CSS技巧。

誰能告訴我這是怎麼實現的（並且更好的是，你用什麼程序，以確定這個加載屏幕的位置？）

Answer 1

這是很容易做到，哪些是你只是看到沒有什麼比遮蔽動畫背景，在這個非常相同的方式工作白色的div元素的集合更多（原諒我那可憐的圖紙）：

如果你知道模板塗鴉如何工作，那麼應該很容易理解背後的概念。

你無法識別圖像，因爲沒有實際的動畫圖像，而只是一個灰色的背景與CSS動畫，這是他們實際的第一層與遮蔽元素隱藏：

由於你可以看到它只不過是一個帶有CSS3動畫漸變的div，下面是它們使用的CSS規則。

._2iwq { 
    -webkit-animation-duration: 1s; 
    -webkit-animation-fill-mode: forwards; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-name: placeHolderShimmer; 
    -webkit-animation-timing-function: linear; 
    background: #f6f7f8; 
    background-image: -webkit-gradient(linear, left center, right center, from(#f6f7f8), color-stop(.2, #edeef1), color-stop(.4, #f6f7f8), to(#f6f7f8)); 
    background-image: -webkit-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%); 
    background-repeat: no-repeat; 
    background-size: 800px 104px; 
    height: 104px; 
    position: relative; 
} 

@-webkit-keyframes placeHolderShimmer { 
    0% { 
    background-position:-468px 0 
    } 
    100% { 
    background-position:468px 0 
    } 
} 

按照所述第二層（或多個）他們正在使用一堆背景容器內部div元素和位於所有絕對，只是屏蔽用戶不應該參閱部件。

那麼還剩下什麼給你看是單純的「洞」或「空格」的各種div元素之間離開，它給你的錯覺，看下面的動畫背景，是一個單一的元素坐在頂端。

你可以通過在元素上放置一個png遮罩來實現，但需要時間加載，除非你使用內嵌圖像當然（但是，嘿，沒有人喜歡它們的標記中難以理解的東西，很難改變）我想爲什麼Facebook選擇唯一的標記方式。

要識別這些元素，您可以在元素加載時按下escape鍵來掛起瀏覽器，留下一個未完成的頁面，然後您可以查看並選擇您最喜愛的devtools--在Chrome上單擊放大鏡然後點擊你想要檢查的元素使得devtool直接跳到你剛剛選擇的元素。

但是請記住，隨着Angs這樣的js客戶端框架的出現，這種技巧可能無法正常工作（特別是如果javascript已經被加載，並且您希望在路由更改之間停止執行）您必須使用內置的調試器/斷點停止瀏覽器。