本文目錄導(dǎo)讀：

1. 基本進(jìn)度條
2. 帶動(dòng)畫的進(jìn)度條
3. 自定義進(jìn)度條樣式

用CSS怎么寫進(jìn)度條

進(jìn)度條是一種用于展示任務(wù)完成度的視覺元素，通常用于網(wǎng)頁或應(yīng)用程序中，使用CSS可以輕松地創(chuàng)建進(jìn)度條，下面是一些示例代碼和步驟，幫助你快速入門。

基本進(jìn)度條

HTML結(jié)構(gòu)：

<div class="progress-bar">
  <div class="progress"></div>
</div>

CSS樣式：

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #f3f3f3;
}
.progress {
  width: 50%; /* 你可以根據(jù)需要調(diào)整這個(gè)寬度 */
  height: 100%;
  background-color: #4caf50;
}

帶動(dòng)畫的進(jìn)度條

如果你想要一個(gè)帶有動(dòng)畫效果的進(jìn)度條，可以使用CSS的@keyframes規(guī)則來創(chuàng)建動(dòng)畫，以下是一個(gè)簡單的示例：

HTML結(jié)構(gòu)：

<div class="progress-bar">
  <div class="progress"></div>
</div>

CSS樣式：

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #f3f3f3;
  position: relative; /* 為了讓動(dòng)畫在進(jìn)度條內(nèi)部進(jìn)行 */
}
.progress {
  width: 50%; /* 你可以根據(jù)需要調(diào)整這個(gè)寬度 */
  height: 100%;
  background-color: #4caf50;
  position: absolute; /* ***定位可以讓動(dòng)畫從左側(cè)開始 */
  left: 0; /* 初始位置 */
  top: 0; /* 垂直對齊 */
  animation: progress-bar-animation 2s linear; /* 定義動(dòng)畫名稱和持續(xù)時(shí)間 */
}
@keyframes progress-bar-animation { /* 定義動(dòng)畫關(guān)鍵幀 */
  from { left: -50%; } /* 動(dòng)畫開始時(shí)，進(jìn)度條位于左側(cè) */
  to { left: 100%; } /* 動(dòng)畫結(jié)束時(shí)，進(jìn)度條位于右側(cè) */
}

自定義進(jìn)度條樣式

你可以根據(jù)自己的需求自定義進(jìn)度條的樣式，例如改變顏色、添加邊框等，以下是一個(gè)示例：

HTML結(jié)構(gòu)：

<div class="progress-bar">
  <div class="progress"></div>
</div>

CSS樣式：

.progress-bar {
  width: 100%;
  height: 30px; /* 可以調(diào)整高度 */
  border: 2px solid #000; /* 添加邊框 */
  border-radius: 5px; /* 圓角邊框 */
}
.progress {
  width: 70%; /* 可以調(diào)整寬度 */
  height: 100%; /* 高度與進(jìn)度條相同 */
  background-color: #f44336; /* 改變顏色 */
}