一种input常见的动画

  <div class="container">
    <input type="text">
  </div>

      .container {  
          width: 40%;
          height: 40px;
          display: flex;
          flex-direction: row;
      }
  
      input[type='text'] {
          border-radius: 10px;
          outline: none;
          border: 1px solid violet;
          transition: .3s; // 关键属性 1
      }
  
      input:focus {
          box-shadow: 0 0 3px 1px violet;
          flex-grow: 1; // 关键属性 2
      }

顺便解释一下 flex-grow flex-shrink flex-basis

• flex-grow用来设置父元素宽度大于所有子元素宽度时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。

• flex-shrink用来设置父元素宽度小于所有子元素宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。

• flex-basis 用来设置元素的宽度，优先级高于 width