在我們平時的搜索中，百度搜索成了很多人的首選。當我們在瀏覽器輸入百度搜索頁的地址時，經常會看到一個特別有趣的加載動畫。今天，我來向大家介紹一下這個加載動畫的實現方式。
<!DOCTYPE html>
<html>
<head>
<style>
.spinner {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin: 100px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>上面的代碼是實現百度加載動畫的 CSS 代碼。其中，我們向頁面添加了一個 `div` 元素，并賦予其 `spinner` 類名。在 `spinner` 類中，我們定義了樣式規則及動畫效果。
首先，我們在加載動畫中使用了兩個 border，這使得加載動畫的樣式看起來像是一個轉圈的圓環。
然后，我們還定義了 loading 動畫的關鍵幀，即 `@keyframes` 規則。它用來描述動畫從開始到結束的狀態，取值范圍從 0% 到 100% 代表了動畫的時間軸位置。在我們的例子中，我們定義了一個叫做 `spin` 的動畫，使得加載動畫以勻速不斷旋轉。
最后，我們將加載動畫用一個 `div` 元素來包裹，并用 `margin: 100px auto` 居中其位置。
在 HTML 文件中引入這份 CSS 文件后，我們就可以在瀏覽器中看到一個和百度搜索頁面一模一樣的加載動畫了。
上一篇css白邊
下一篇CSS百分比寫正方形