CSS3是一種前端開發技術，在不需要使用JavaScript或其他web編程語言的情況下，可以為網頁增添各種各樣的動畫效果。其中，雷達動畫是一種非常炫酷的效果，在網頁制作中被廣泛使用。

.radar {
width: 100px;
height: 100px;
position: relative;
margin: 50px auto;
animation: radar 3s infinite linear;
}
.radar:before,
.radar:after {
content: '';
position: absolute;
top: 0;
left: 0;
}
.radar:before {
width: 100%;
height: 100%;
border: solid 2px #18a3ff;
border-radius: 50%;
opacity: .7;
z-index: 1;
}
.radar:after {
width: 50px;
height: 50px;
border: solid 3px #18a3ff;
border-top-color: transparent;
border-right-color: transparent;
border-radius: 50%;
z-index: 2;
margin: 25px;
opacity: .9;
top: 0;
left: 0;
animation: radar-point 3s infinite ease-in-out;
}
@keyframes radar {
0% {
transform: scale(0.2);
opacity: 0.2;
}
60% {
transform: scale(1);
opacity: 0.6;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
@keyframes radar-point {
0% {
transform: rotate(0deg);
opacity: 0.2;
}
100% {
transform: rotate(360deg);
opacity: 0.2;
}
}

上述代碼中，我們創建了一個類名叫做radar的div容器，用來顯示雷達動畫。通過設置其寬度、高度、位置等樣式屬性，使其在網頁中合適地顯示出來。

接著，我們使用:before和:after偽元素，分別為雷達的外框和中心點設置樣式屬性。其中，我們通過border-radius屬性為它們設置了圓角，使其看起來更加圓潤。并且，我們設置了不同的透明度和邊框顏色，增加了動畫效果的層次感。

最后，在CSS3中，我們使用了@keyframes規則，通過設置不同時間點下元素所呈現的狀態，來制作雷達動畫。通過縮放transform、不透明度opacity和旋轉transform等屬性的變化，增強動畫的視覺效果。