今天要介紹如何使用conic-gradient和rotate模擬雷達掃描的動畫效果

HTML

<div class="radar">
    <div class="scanner"></div>
    <div class="grid"></div>
    <div class="target target1"></div>
    <div class="target target2"></div>
</div> 

CSS

1. body 樣式

將內容居中排列

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #000;
}

2. radar 容器

創建雷達的外觀，包括圓形和淡出效果

.radar {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 255, 0, 0.1), transparent 70%);
  border: 2px solid green;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.6);
  overflow: hidden;
}

• border-radius : 將雷達容器設為圓形
• background :
  • radial-gradient：使用徑向漸變創建雷達中心到邊緣的淡出效果
• border : 給雷達容器添加綠色的邊框，模擬雷達屏幕的外框
• box-shadow :增加綠色的外光暈效果
• overflow : 限制內部內容不超出雷達容器的範圍

3. 雷達網格

創建同心圓和輻射線

.grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, transparent 30%, rgba(0, 255, 0, 0.3) 31%, transparent 32%),
                    radial-gradient(circle, transparent 60%, rgba(0, 255, 0, 0.3) 61%, transparent 62%),
                    radial-gradient(circle, transparent 90%, rgba(0, 255, 0, 0.3) 91%, transparent 92%),
                    linear-gradient(rgba(0, 255, 0, 0.3), rgba(0, 255, 0, 0.3)),
                    linear-gradient(90deg, rgba(0, 255, 0, 0.3), rgba(0, 255, 0, 0.3));
  background-size: 100% 100%;
  border-radius: 50%;
}

• background-image ：使用多個漸變來創建圓形網格和輻射線
  • 三個 radial-gradient 創建同心圓
  • 兩個 linear-gradient 創建垂直和水平的輻射線
• background-size : 確保背景圖像覆蓋整個雷達容器。
• border-radius : 保持網格的圓形

4. 掃描線

掃描線使用 conic-gradient 來模擬扇形效果，並通過旋轉動畫來呈現掃描

.scanner {
  width: 100%;
  height: 100%;
  background: conic-gradient(from 90deg, rgba(0, 255, 0, 0.5) 10%, transparent 40%);
  border-radius: 50%;
  animation: scan 3s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
}

• background : 使用圓錐漸變來模擬掃描線(conic-gradient)
  • from 90deg : 指定掃描線的起點，有 10% 的不透明綠色漸變，40% 為透明
• border-radius : 確保掃描線的形狀與雷達保持一致。
• animation : 應用名為 scan 的動畫，3 秒內旋轉一圈，並無限循環

5. 目標點

雷達上閃爍的目標點

.target {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(0, 255, 0, 0.8);
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}

• position : 每個目標點在雷達內部相對定位
• width : 每個目標點為 8x8 像素的圓形
• border-radius : 使目標點為圓形
• background-color : 使用半透明的綠色，模擬雷達上的目標
• box-shadow : 添加綠色的光暈效果，使目標點更醒目

6. 目標點1、目標點2

掃描動畫和目標點的閃爍效果

.target1 {
  top: 30%;
  left: 60%;
  animation: blink 1.5s infinite;
}
 
.target2 {
  top: 70%;
  left: 40%;
  animation: blink 1.5s infinite 0.5s;
}

• top 和 left ： 定位目標點在雷達內的不同位置
• animation : 應用名為 blink 的動畫，每1.5秒閃爍一次，target2 有 0.5 秒的延遲

7. 動畫效果：掃描和閃爍

@keyframes scan {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
@keyframes blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

• scan ： 這個動畫控制掃描線的旋轉，從 0 度旋轉到 360 度，完成一次完整旋轉
• blink ： 這個動畫控制目標點的閃爍，從完全透明（opacity: 0）到完全可見（opacity: 1）再回到透明

結果呈現