CSS 天線是一種讓網頁元素向上或向下伸展的效果，使得網頁的視覺效果更加豐富有趣的技術。下面我們將介紹如何使用 CSS 創建天線效果。

.antenna {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 50px;
background-color: #333;
border-radius: 0 0 12px 12px;
}
.antenna:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 20px solid #333;
}
.antenna:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border: 10px solid #333;
border-radius: 50%;
}

在上述代碼中，我們采用了 position:relative 屬性將天線定位在父元素內部。使用了 transform 屬性對天線進行位置調整，并設定了其寬度和高度，設置了天線的背景顏色以及圓角邊框樣式。

接著，我們用偽元素 :before 和 :after 來渲染出天線的兩端。其中 :before 元素通過設置三角形邊框的方式來模擬天線的錐形重點， :after 元素使用 border-radius 屬性畫出了天線底部的半圓形設計。

最后，我們將天線的位置用 transform 屬性在垂直方向上向上或向下移動，即可實現一個簡單的天線效果。