html - 如何创建此搜索框动画？

Question

我目前正在尝试复制一个网站进行练习，但由于我不知道如何创建搜索框而停止了。

现在，我知道如何使用表单和输入法创建一个普通的搜索框，但是这个特定的搜索框有一个轻微的动画。 我会解释。

Search Box

好的，所以搜索框只会在您单击放大镜后出现。执行此操作后，搜索框将从放大镜的左侧滑出。 如何隐藏搜索框并仅在单击后才可见？以及如何让它“滑出”？

Answer 1

我的解决方案: 使用以下 JavaScript 代码显示:

    var button = document.getElementById("search");
    var input = document.getElementById("search_input");
    document.body.removeChild(input);
    var permission = true;
    button.addEventListener("click", appear);
    function appear() {
        if (permission == true) {
            if(document.getElementById("search_input") == null || window.getComputedStyle(document.getElementById("search_input")).getPropertyValue("opacity") == 0) {
                input.setAttribute("class", "static");
                document.body.appendChild(input);
            } else {
                sliding();
            }
        }
    }
    function sliding() {
        permission = false;
        input.setAttribute("class", "sliding");
        document.body.removeChild(input);
        document.body.appendChild(input);
        window.setTimeout(remove, 2900);
    }
    function remove() {
        document.body.removeChild(input);
        permission = true;
    }

您只需在按钮标签或 img 标签中添加“search”作为 id，在 input 标签中添加“search_input”作为 id。对于滑出，您可以使用此 CSS 动画:

@keyframes slide {
    from { left: 10%; opacity: 1;}
    to { left: 90%; opacity: 0;}
}
@-webkit-keyframes slide {
    from { left: 10%; opacity: 1;}
    to { left: 90%; opacity: 0;}
}
#search_input {
    position: absolute;
    left: 10%;
}
.sliding {
    animation-name: slide;
    animation-duration: 3s;
    -webkit-animation-name: slide;
    -webkit-animation-duration: 3s;
}