發射信號動畫是一種常見的網頁設計效果，通過使用 CSS 動畫，我們可以使一個按鈕或一個鏈接看起來更加生動有趣。

CSS 動畫使用了一些比較基礎的屬性，例如 transition、transform、animation 等等，但是需要注意的是，不同的瀏覽器對于動畫效果的兼容性可能會有所不同。

.button {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #2980b9;
}
.signal {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #f1c40f;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
animation: signal 3s ease-in-out infinite;
}
@keyframes signal {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
25% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.7;
}
50% {
transform: translate(-50%, -50%) scale(0.5);
opacity: 0.4;
}
75% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 0.7;
}
100% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
}

上面的代碼示例演示了一個按鈕和一個信號的動畫效果。當鼠標懸浮在按鈕上時，背景顏色會有一個平滑的過渡動畫。信號的動畫運用了 CSS3 中的動畫屬性和關鍵幀，通過改變信號元素的縮放和透明度屬性，并配合關鍵幀實現了一個類似信號發射的動畫效果。

使用 CSS 動畫可以讓我們創造出更加生動有趣的網頁設計效果，帶給用戶更好的使用體驗，同時也提高了頁面的交互性和觀賞性。