hid_app/style/login/login.scoped.scss

.hc-login-box {
  .hc-dot-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .dot {
      opacity: 1;
      background-color: rgba(85, 77, 132, 0.1);
    }
    .dot-1 {
      left: 30px;
      top: 42px;
      width: 33px;
      height: 33px;
      transform-origin: 16.5px 16.5px;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-fill-mode: backwards;
      animation-name: animationDot1;
    }
    .dot-2 {
      right: -43px;
      top: -43px;
      width: 110px;
      height: 110px;
      transform-origin: 55px 54.5px;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-fill-mode: backwards;
      animation-name: animationDot2;
    }
    .dot-3 {
      left: 85px;
      top: 90px;
      width: 12px;
      height: 12px;
      transform-origin: 6px 6px;
      animation-duration: 1s;
      animation-iteration-count: 1;
      animation-fill-mode: backwards;
      animation-name: animationDot1;
    }
  }
  .hc-login-container {
    position: relative;
    height: 100%;
    padding: 0 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    .hc-login-center {
      position: relative;
      margin-top: -6rem;
      flex: 1;
      .hc-login-title {
        font-size: 20px;
        font-weight: 500;
        color: #101010;
      }
      .hc-login-text {
        color: #8E8E93;
        font-size: 14px;
        margin-top: 8px;
      }
      .hc-login-form {
        position: relative;
        margin-top: 60px;
        .hc-login-form-item {
          position: relative;
          margin-top: 14px;
          .hc-login-input {
            padding: 10px;
            font-size: 14px;
            line-height: initial;
            min-height: initial;
            height: initial;
            border-bottom: 1px solid #E5E5EA;
          }
        }
      }
    }
  }
}

//动画
@keyframes animationDot1 {
  0% {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  100% {
     transform-origin: left bottom;
     transform: none;
     opacity: 1;
   }
}

@keyframes animationDot2 {
  0% {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  100% {
    transform-origin: right bottom;
    transform: none;
    opacity: 1;
  }
}