实现雷达波纹向外扩散

---

一、雷达波纹向外扩散效果

1、如下最终实现的效果

二、实现代码

1.全部代码直接cv就好

<template>
    <div class="radar_container">
      <div class="radar_wave"></div>
      <div class="radar_wave"></div>
      <div class="radar_wave"></div>
      <div class="radar_center"></div> 
 </div>
</template>

<script>
import * as THREE from 'three';

export default {
    
    
  mounted() {
    
    
    // 创建场景
   
  }
};
</script>

<style scoped lang="scss">
.radar_container {
    
    
  top: 5px;
  right: 105px;

    margin: auto;
    position: absolute;
    width: 200px;
    height: 200px;
    // background-color: #000;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
 
  .radar_wave {
    
    
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid red;
    border-radius: 50%;
    transform: scale(0); // 初始状态改为从中间开始
    box-shadow: inset 0 0 5px 1px red; // 添加阴影
    animation: radar_wave-animation 3s infinite;
  }
 
  .radar_wave:nth-child(1) {
    
    
    animation-delay: 0s;
  }
  .radar_wave:nth-child(2) {
    
    
    animation-delay: 1s;
  }
  .radar_wave:nth-child(3) {
    
    
    animation-delay: 2s;
  }
 
  @keyframes radar_wave-animation {
    
    
    0% {
    
    
      transform: scale(0); // 从中间开始
      opacity: 1;
    }
    100% {
    
    
      transform: scale(10); // 扩散到原来的10倍大小
      opacity: 0;
    }
  }
  .radar_center {
    
    
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red; /* 红点的颜色 */
  border-radius: 50%;
  z-index: 1; /* 确保红点在波浪上方 */
}
</style>

总结

纯html、css实现效果可用来雷达扩散，报警提示等