CSS聚焦时搜索框向左拉长包含动画效果

<style>
  .search-box {
    display: inline-block;
    width: 300px;
    height: 30px;
    border: 1px solid #ccc;
    padding: 0 10px;
    transition: width .5s;
  }
  .search-box:focus {
    outline: none;
    width: 400px;
  }
</style>

<input type="text" class="search-box" placeholder="请输入您要搜索的文字">

注意点：

1. 必须设置input标签的display属性，否则行间元素无法改变其尺寸。
2. 因为美化的原因设置了input标签的边框及focus（聚焦）样式，移除了内边边框及阴影等效果，避免干扰。
3. 进行transition进行动画设置时应考虑到是否会造成页面重排及页面重排带来的性能损害。
4. 因为要求是改变宽度，所以尽量避免设置transition:all。

preview