element改造, 仿mac表单元素聚焦效果

1643746429281202222424171.gif

.el-input:focus-within, .el-textarea:focus-within {
  border: none;
  position: relative;
  &::before {
    border-radius: 4px;
    position: absolute;
    box-shadow: 0 0 0 3px #2e6da4;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: focus-border-effect 0.4s forwards ease-out;
  }
  @keyframes focus-border-effect {
    0% {
      transform: scale3d(1.12, 1.32, 1);
    box-shadow: 0 0 0 0px #2e6da4;
      opacity: 0;
    }
    100% {
      opacity: 1;
    box-shadow: 0 0 0 3px #2e6da4;
      transform: scale3d(1, .98, 1);
    }
  }
}

.el-input__inner:focus, .el-textarea__inner:focus {
  border-color: transparent !important;
}