以下是一個完整的漸進式教程，拆解如何用 HTML + CSS 構建“Pulsar”水波脈沖動畫。通過閱讀，你將理解每個核心屬性與關鍵幀如何配合，讓一個小圓不斷散發動態波紋，并且文字始終停留在圓心。
第 0 步：項目概覽
文件結構示例如下：
pulsar-effect/├─ index.html└─ style.css
index.html：頁面主體，包含一個居中的<div>顯示“Pulse”文字。style.css：用來設置背景、圓形外觀、關鍵幀動畫等。
第 1 步：編寫基礎 HTML
打開/新建 index.html，編寫最簡潔的頁面骨架：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="author" content="Milena Carecho"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Pulsar</title><!-- 關聯CSS文件 --><link rel="stylesheet" type="text/css" href="style.css">
</head>
<body><!-- 用于居中元素 --><div class="center"><!-- 核心 pulsar 動畫元素 --><div class="pulse">Pulse</div></div></body>
</html>
代碼說明
<div class="center">：將子元素放在頁面正中央的輔助容器。<div class="pulse">Pulse</div>：一個圓形塊，用來顯示文字“Pulse”并附加脈沖動畫。
第 2 步：基礎CSS，設置背景與居中
新建或編輯 style.css，先設置頁面外觀與 .center 容器布局：
body {margin: 0;padding: 0;background: #262626; /* 深灰色背景，讓動畫更突出 */
}.center {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
- 去除 body 默認間距：保證背景全屏。
- 深灰色背景：凸顯后面青綠色脈沖效果。
- 絕對定位 +
transform: translate：將.center及其子元素完美居中在可視區。
第 3 步：打造圓形 + 文字
在 .pulse 上定義尺寸、顏色、字體等，形成一個圓形按鈕式的視覺：
.pulse {width: 100px;height: 100px;background: #177c80; /* 青綠色背景 */border-radius: 50%; /* 圓形 */color: #fff; /* 白色文字 */font-size: 20px; /* 字號適當放大 */text-align: center; /* 文本居中(橫向) */line-height: 100px; /* 文本居中(縱向) */font-family: verdana;text-transform: uppercase; /* 文字大寫 *//* 調用關鍵幀動畫 */animation: animate 3s linear infinite;
}
關鍵知識點
border-radius: 50%：將 100×100 的方塊變成完美圓形。- 文字居中：使用
line-height與元素高度相等，再配合text-align: center;。 - 動畫觸發：
animation: animate 3s linear infinite;告訴瀏覽器用名為animate的關鍵幀，3秒一輪，不斷重復 (infinite)。
第 4 步：定義關鍵幀動畫
真正的脈沖效果是通過 box-shadow 在不同時刻的擴散和透明度變化來實現。把下面的代碼加到 style.css：
@keyframes animate {0% {box-shadow: 0 0 0 0 rgba(55, 209, 201, 0.7), 0 0 0 0 rgba(24, 153, 104, 0.7);}40% {box-shadow: 0 0 0 50px rgba(55, 209, 201, 0), 0 0 0 0 rgba(55, 209, 201, 0.7);}80% {box-shadow: 0 0 0 50px rgba(55, 209, 201, 0), 0 0 0 30px rgba(55, 209, 201, 0);}100% {box-shadow: 0 0 0 0 rgba(55, 209, 201, 0), 0 0 0 30px rgba(55, 209, 201, 0);}
}
多重 box-shadow
- 每一幀都定義了兩個陰影，用逗號分隔。
0 0 0 50px rgba(...)中的 第四個值（“50px”）是擴散半徑（spread-radius），用于制造類似擴張的環。rgba(..., 0.7)與rgba(..., 0)表示不同透明度，使外擴后漸漸消失。
動畫階段解讀
0%：兩個陰影都在半徑0處，且透明度 0.7（略微可見）。40%：第一個陰影擴散到 50px，并且透明度變0（消失于外側），第二個陰影還在半徑0但保持 0.7。80%：第一個陰影持續在 50px 且不可見，第二個陰影擴散到 30px 同時也逐漸透明。100%：兩個陰影都回到0半徑且透明度0，準備進入下個循環。
通過在不同時刻讓兩個環先后擴散、變淡，呈現出脈沖或水波一圈圈向外擴散的效果。
第 5 步：測試與微調
現在，打開瀏覽器查看 index.html，你會看到：
- 網頁以深灰色為背景。
- 中央有一枚青綠色的小圓，內寫“Pulse”。
- 該圓周圍不斷出現擴散且漸隱的陰影環，形成“脈沖”動畫。
如需調整：
- 動畫周期：在
.pulse里把3s改成你想要的時長，如2s或5s。 - 顏色 & 透明度：改動
rgba(55, 209, 201, 0.7)和rgba(24, 153, 104, 0.7)，可用更多顏色，或修改透明度營造更微妙的光暈感。 - 擴散尺寸：
0 0 0 50px→0 0 0 80px可擴大脈沖半徑；還可改變關鍵幀中各個百分比節點來控制時機。 - 只要一個環：可將雙重陰影改為一個，脈沖更簡潔。
總結
通過本教程的分步驟拆解，你學習到了：
- 如何居中頁面元素（
position: absolute; transform: translate(-50%, -50%)）。 - 使用 CSS 生成圓形（
width=height; border-radius=50%）。 - 使用多重
box-shadow制造外擴“水波”效果。 - 關鍵幀配合動畫：在不同階段改動
box-shadow的擴散半徑與透明度，實現連續的“脈沖”循環。
不需要任何 JavaScript，就能完成一個簡潔又炫酷的“Pulsar”水波脈沖動畫！你可以將其應用在頁面加載指示、按鈕交互或其他創意場景中。祝你學習愉快、創意無限！
)
——網絡原理——TCP協議解析一)
)
