搜索表单慢显示 [html] [关闭]

Question

任何人都可以帮我创建这样的搜索表单：

http://gledanjefilmova.net/

我知道 css 中有一些元素，但我忘记了……

Answer 1

要创建这样的效果，您需要为输入字段的宽度和颜色添加一个过渡属性。当该字段具有焦点时，您只需更改宽度和颜色。

.animated-input {
    background: #000;
    border: none;
    border-radius: 5px;
    width: 40px;
    transition: width 1s, background 1s;
}

.animated-input:focus {
    background: #fff;
    width: 200px;
}

这是一个 jsfiddle： https://jsfiddle.net/4v0z4tLL/

Answer 2

要为任何元素添加慢动作效果，您必须使用 css 中的过渡属性：

-webkit-transition: width 400ms ease-in;
transition: width 400ms ease-in;

更多信息请阅读： http://www.w3schools.com/css/css3_transitions.asp