[JavaScript知识库]CSS样式实现雷达扫描动效

今天前端实习工作要写一个雷达扫描的效果（如图），对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)
        }
      }
    }