CSS骨架屏是一種優化頁面加載速度和用戶體驗的技術。這種技術可以在頁面加載時展示骨架屏，以使頁面迅速呈現加載狀態，避免用戶等待時間過長。下面我們將詳細介紹CSS骨架屏的原理和應用。

/* 骨架屏 */
.skeleton {
background-color: #f2f2f2;
}
/* 電影列表 */
.movie-container {
margin: 20px;
display: flex;
flex-wrap: wrap;
}
/* 電影卡片 */
.movie-card {
width: calc(33.333% - 20px);
margin-right: 20px;
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
box-sizing: border-box;
}
/* 電影海報 */
.movie-poster {
height: 300px;
background: linear-gradient(270deg, #f2f2f2 0%, #e6e6e6 100%);
}
/* 電影信息 */
.movie-info {
padding: 20px;
}
/* 電影標題 */
.movie-title {
width: 60%;
height: 20px;
margin-bottom: 10px;
background-color: #f2f2f2;
}
/* 電影評分 */
.movie-rating {
width: 40%;
height: 20px;
margin-bottom: 10px;
background-color: #f2f2f2;
}
/* 電影類型 */
.movie-genre {
width: 40%;
height: 20px;
margin-bottom: 10px;
background-color: #f2f2f2;
}

上面的CSS代碼中，我們定義了一個名為“skeleton”的CSS類，它的背景顏色為灰色。在頁面加載時，我們可以使用Javascript動態添加此CSS類，并將其應用于頁面的所有元素。這樣，當頁面加載時，所有元素都會顯示為灰色的骨架屏，直到相應的內容加載完畢。

在具體的應用中，我們可以將骨架屏應用于各種需要異步獲取數據的頁面，例如電影列表、商品列表、文章列表等。在請求數據時，我們可以先顯示骨架屏，以告知用戶數據正在加載中，從而提升用戶體驗。