CSS样式实现雷达扫描动效

最新推荐文章于 2025-06-23 17:15:48 发布

良夜_

最新推荐文章于 2025-06-23 17:15:48 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端相关文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_45642765/article/details/123505785

前端相关专栏收录该内容

6 篇文章

订阅专栏

这篇博客记录了作者在前端实习中实现雷达扫描动效的过程。通过CSS的transform-origin和动画关键帧@keyframes，结合border-image和linear-gradient创建出雷达扇形区域的渐变效果，使得扫描动效更为自然。主要涉及CSS动效、圆角切割技巧和动画原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天前端实习工作要写一个雷达扫描的效果（如图），对css动效实现很不熟悉，所以记录一下这次的实现。
请添加图片描述
index.js文件中的div嵌套关系：
container->radar->fan

          <div className={styles.box2__window__container}>
            <div className={styles.box2__window__container__radar}>
              <div className={styles.box2__window__container__fan}></div>
            </div>
          </div>

radar类DIV是300px的宽高，fan类DIV是150px的宽高。

fan的实现运用到了CSS里面的斜切screw，运用以后可以让fan的渐变效果更加自然。
类似transform-origin旋转点等也可以在网站上在线调节查看效果。

style.less文件样式：

    &__container {
      overflow: hidden;
      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;
      }


      // &__radar::before {
      //   width: 150px;
      //   height: 300px;
      //   content: '';
      //   display: block;
      //   position: absolute;
      //   right: 0;
      //   top: 0;
      //   box-sizing: border-box;
      //   // border-left: 1px solid #5ef2ff;
      // }

      // &__radar::after {
      //   width: 300px;
      //   height: 150px;
      //   content: '';
      //   display: block;
      //   box-sizing: border-box;
      //   border-bottom: 1px solid #5ef2ff;
      // }

      // &__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%;
        border-bottom: 6px solid transparent;
        border-image: linear-gradient(to right, transparent, #ff9100);
        border-image-slice: 5;
        background: transparent;
        background-image: linear-gradient(to right, transparent, #ffa42d);
        animation: rotateAnimate 2s linear infinite;
      }

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

        to {
          transform: rotate(360deg) skew(-10deg)
        }
      }
    }