这中效果怎么做

Question

点击图标的时候这个这个搜索框逐渐展开的效果怎么做。从右向左展开

Answer 1

div{
    width:100px;
    height:100px;
    border-radius:50px;
    background:#ccc;
    overflow:hidden;
    float:right;
}
div:hover{
  width:400px;
  transition: width 2s; 
}
输入框写在div内，超出部分隐藏