如何创建这样的搜索栏？

Question

我真的很喜欢这个网站的搜索栏，https://www.marmosetmusic.com/

我基本上可以使用 CSS 步动画来完成，但它看起来不流畅，我必须根据占位符的长度更改时间。

此外，我不确定如何将其叠加在图像或视差设计上。

我试过的是：

HTML:

<title>Search</title>

  <link rel="stylesheet" href="css/normalize.css">

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
    <link rel="stylesheet" href="css/type-style.css" media="screen" type="text/css" />

    <script src="js/modernizr.js"></script>

</head>

<body>

  <h1>
  <i class='fa fa-anchor'></i>
  Test.com
</h1>
<div class='overlay'></div>
<div class='wrapper'>
  <form class='search'>
    <input placeholder="search..." required='true' type='text'>
    <button class='search-button'>
      <i class='fa fa-search'></i>
    </button>
  </form>
</div>
  <script src="js/index.js"></script>

</body>

</html>

CSS:

@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300,400);
body {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/16902/holidayphoto.jpg);
  background-position: 0 90%;
  overflow: hidden;
}

body, html {
  height: 100%;
}

h1 {
  color: #fff;
  font-size: 3.5em;
  text-align: center;
  font-family: 'Alegreya Sans SC', sans-serif;
  padding: 20px;
  font-weight: 300;
  opacity: 1;
}
h1 i {
  color: #e74c3c;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  background: #000;
  opacity: 0.92;
  top: 0;
  left: 0;
}

.wrapper {
  width: 560px;
  height: 60px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -280px;
  margin-top: -20px;
  -webkit-font-smoothing: antialiased;
  z-index: 999999;
}

input[type="text"] {
  font-family: 'Alegreya Sans SC', sans-serif;
  width: 480px;
  height: 40px;
  padding: 10px 0 10px 20px;
  font-size: 24px;
  font-weight: 300;
  color: #eee;
  background: #222;
  border: none;
  float: left;
  -webkit-transition: all 420ms ease-in-out;
  -moz-transition: all 420ms ease-in-out;
  -o-transition: all 420ms ease-in-out;
  transition: all 420ms ease-in-out;
}

input:focus {
  color: #fff;
  outline: none;
  background: #1a1a1a;
}

button[type="submit"], .search-button {
  border: 0;
  width: 60px;
  height: 60px;
  background: #222222;
  border-left: solid 5px #222222;
  text-align: center;
  float: left;
  -webkit-transition: all 420ms ease-in-out;
  -moz-transition: all 420ms ease-in-out;
  -o-transition: all 420ms ease-in-out;
  transition: all 420ms ease-in-out;
}
button[type="submit"] i, .search-button i {
  color: #fff;
  font-size: 40px;
  line-height: 1.4em;
}

.search-button:focus {
  outline: none;
}

.search-button:hover {
  background: #e53f2e;
  border-left: #e53f2e;
}

.switch-wrapper {
  font-family: 'Alegreya Sans SC', sans-serif;
  width: 70px;
  height: 40px;
  margin: 10px;
  border-radius: 40px;
  position: absolute;
  background: #444;
  right: 118px;
  cursor: pointer;
  -webkit-transition: all 420ms ease-in-out;
  -moz-transition: all 420ms ease-in-out;
  -o-transition: all 420ms ease-in-out;
  transition: all 420ms ease-in-out;
}
.switch-wrapper:before {
  position: absolute;
  content: 'FLIGHT';
  line-height: 2.7em;
  left: -54px;
}
.switch-wrapper:after {
  position: absolute;
  content: '+ HOTEL';
  line-height: 2.7em;
  right: -60px;
}
.switch-wrapper .switch {
  width: 36px;
  height: 36px;
  margin: 2px 2px;
  background: #222;
  border-radius: 50%;
  position: absolute;
}
.switch-wrapper .switch:hover {
  background: #282828;
}

.rent {
  position: absolute;
  left: 30px;
}

.switch-wrapper.switched:after {
  color: #3498db;
  text-shadow: 0 0 4px #3498db;
  -webkit-transition: all 420ms ease-in-out;
  -moz-transition: all 420ms ease-in-out;
  -o-transition: all 420ms ease-in-out;
  transition: all 420ms ease-in-out;
}
.switch-wrapper.switched:before {
  color: #cfcfcf;
  -webkit-transition: all 420ms ease-in-out;
  -moz-transition: all 420ms ease-in-out;
  -o-transition: all 420ms ease-in-out;
  transition: all 420ms ease-in-out;
}

.switch-wrapper.not-switched:after {
  color: #cfcfcf;
  -webkit-transition: all 420ms ease-in-out;
  -moz-transition: all 420ms ease-in-out;
  -o-transition: all 420ms ease-in-out;
  transition: all 420ms ease-in-out;
}
.switch-wrapper.not-switched:before {
  color: #3498db;
  -webkit-transition: all 420ms ease-in-out;
  -moz-transition: all 420ms ease-in-out;
  -o-transition: all 420ms ease-in-out;
  transition: all 420ms ease-in-out;
}

.not-valid {
  display: none;
  width: 100%;
  height: 30px;
  background: #e74c3c;
  position: absolute;
  opacity: 1;
  top: 70px;
}

.not-valid span {
  font-family: 'Alegreya Sans SC', sans-serif;
  color: #fff;
  padding: 10px;
  line-height: 1.96em;
}
.not-valid span i {
  padding-right: 4px;
}
.not-valid span .error-close {
  color: #7b190f;
  float: right;
  padding: 7px 10px 0 0;
  cursor: pointer;
}

label.error {
  display: none !important;
}

JS

var s  = $('.switch');
var sw = $('.switch-wrapper');

$('input').on('click', function(a) {
  a.preventDefault();
});

function switchToggle() {
  s.stop(false,true).animate({left: "0"}, 200);
}

s.on('click', function() {

     if (sw.hasClass('switched')) {
       switchToggle();
     } else if (sw.hasClass('not-switched')) {
       s.stop(false,true).animate({left: "30px"}, 200);
     }

     sw.toggleClass('switched not-switched'); 
});

$('.search').validate({

   invalidHandler: function(event, validator) {

    var errors = validator.numberOfInvalids();

    if (errors) {

      $("div.not-valid span").html("<i class='fa fa-warning'></i>  Please type search <i class='fa fa-times error-close'></i>");

      // Should use .stop() function.
      $(".not-valid").fadeIn();

      setTimeout(function() { 
          $(".not-valid").fadeOut();
        }, 2000);

      $('.error-close').on('click', function() {

        $(".not-valid").fadeOut();

      });

    } else {

      $(".not-valid").fadeOut();

    }

  }

});

All in one 在 this jsfiddle 演示中找到。如有任何帮助，我们将不胜感激！

Answer 1

这是一个简单的示例，说明如何以与您的示例类似的方式设置搜索字段的样式。 display: flex 完成了这里的大部分魔法，剩下的就是去除背景和边框或使用图像设置提交按钮的样式

对于打字动画，您应该使用像 typed.js

这样的预制插件

.search {
  background: rgba(0, 0, 0, 0.1);
  display: flex;
}
.search input {
  border: 0px;
  margin: 0px;
  padding: 0px;
}
.search input[type="text"] {
  flex: 1;
  background: transparent;
  font-size: 2em;
}
.search input[type="submit"] {
  font-size: 2em;
  margin: 4px;
  width: 1em;
  height: 1em;
  cursor: pointer;
  background-color: transparent;
  background-image: url(https://cdn0.iconfinder.com/data/icons/basic-lines/39/search-512.png);
  background-size: cover;
}
.search input:focus {
  outline: none;
}

<div class="search">
  <input type="text" name="search">
  <input type="submit" value="">
</div>

如何创建这样的搜索栏？

How can I create a searchbar like this?

css

animation

search

placeholder

smooth