前端实现雷达扫描效果220426

一.先看效果,是想要的继续往下

这样的雷达扫描效果如何通过前端代码实现?一共需要以下6步。

第一步:新建一个html文档

创建三个div元素,最外层一个用于定位,第二个实现背景,第三个实现扫描.了解实现原理之后可以自行调整.

<div class="container">
  <div class="radar">
    <div class="fan"></div>
  </div>
</div>

第二步:给外层div定位设置宽高等

.container {
    position: relative;
    top: 200px;
    left: 300px;
    width: 300px;
    height: 300px;
    border: 1px solid #f00;
}

效果如下图:

第三步:给背景上色

   .radar{
        overflow: hidden;
        position: relative;
        margin: 0px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        opacity: 0.6;
        background: #7bcbeb;
        box-sizing: border-box;
      }

效果如图:

第四步:画出内圆,可以根据自己的需要多花几个

.fan {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid #fff;
    width: 150px;
    height: 150px;
  }

效果如图:

第五步:给内圆添加伪元素,画出扇形,固定位置,并添加一个动画

 .fan::after {
    content: "";
    width: 150px;
    height: 150px;
    display: block;
    box-sizing: border-box;
    position: relative;
    top: -50%;
    right: -50%;
    transform-origin: 0% 100%;
    background-image: linear-gradient(to right, transparent, red);
    animation: rotateAnimate 2s linear infinite;  //给该元素添加一个动画,且无限循环
  }

效果如图:

第六步:定义一个动画,大功告成

 @keyframes rotateAnimate {
    from {
      transform: rotate(0deg) skew(-10deg);
    }
    to {
      transform: rotate(360deg) skew(-10deg);
    }
  }

效果如图:

前端工作填坑过程之雷达扫描效果简易版220426,一开始还以为用Eacharts实现,结果有点意外,有点想不到