<div>这是一个Input↑</div>
<input placeholder="这是一个Input">
div {
    position: absolute;
    left:40%;
    top: 50px;
    font-size: 20px;
}
    input {
        position: flex;
        margin-left:42%;
        height: 30px;
        width: 30px;
        transition: width .6s ease-out,visibility .6s 1ms ease-out;
        transform: translateX(-100%);
    }
    
    input:hover {
        height: 30px;
        width: 200px;
        transition: width .6s ease-out,visibility .6s 1ms ease-out;
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.