Question

我在这里有一些代码可以创建一个动画搜索栏：

<html>
<head>
<style> 
input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
</style>
</head>
<body>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

每当有人点击它时，搜索栏会展开并让用户输入关键字。我如何制作它，以便当用户点击搜索栏时，它等待（例如1秒）搜索栏展开，然后重定向到URL。我是否将input[type=text]更改为input[type=code]并对input[type=text]:focus执行相同操作？请不要给出太复杂的答案，我只是一个初学者。我查找了大多数方向以插入代码，但我的网站不支持site.com/?search=keywords。请帮忙!!

谢谢， - 将

Answer 1

也许是JS：

<form>
<input type="text" name="search" placeholder="Search.." onClick="redirect()">
</form>

并且：

<script>
    function redirect() {
        setTimeout(function(){
            window.location.replace("http://stackoverflow.com");
        }, 1000);
    }
</script>

Answer 2

您可以使用css属性进行转换，＆＃34; transition-delay＆＃34;这是代码示例。 Here is a jsfiddle

input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px; 
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
 -webkit-transition-delay: 2s; /* Safari */
transition-delay: 2s;

}

input[type=text]:focus {
   width: 100%;
}

重定向到占位符上的网址点击

2 个答案: