Apple.com搜索式转换

Apple.com Search like Transitions

本文关键字：转换 搜索 com Apple      更新时间：2023-09-26

我想让我的搜索栏像Apple.com一样转换，我已经在网上读过很多关于它的帖子。我目前正在使用CSS隐藏和显示元素来创建搜索栏。但搜索栏轮廓和搜索栏背景（白色）仍在显示。除了搜索字形图标（就像apple.com一样），我什么都不想显示。这有点困难，因为字形图标显示为输入框内的背景图像。

我需要JS来完全实现行为吗？或者有什么方法可以使输入框的其余部分不可见？

HTML:

<input type="text" class="form-control search left rounded" id="search-bar" placeholder="search" ng-model="search.name"></input>

CSS：

.search {
    width:360px;
    position:relative; top:2px; 
    padding:8px 5px 8px 30px;
    border:1px solid #ccc;
    background:white url(http://i.imgur.com/lFkqn.png) left center no-repeat;
}
#search input {
 /*background: none;*/
 /*opacity: 0.1;*/
 width: 30px !important;
 -moz-transition: width 0.5s ease-out !important;
 -webkit-transition: width 0.5s ease-out !important;
 transition: width 0.5s ease-out !important;
 border: 0 !important;
    outline: 0 !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
}
#search input:focus {
  /*opacity: 0.9;*/
 width: 200px !important;
 -moz-transition: width 0.5s ease-out !important;
 -webkit-transition: width 0.5s ease-out !important;
 transition: width 0.5s ease-out !important;
 border: default !important;
 background: default !important;
}

以下是您只需要css3的内容。

.search {
    width:30px;
    position:relative;
    top:2px;
    padding:8px 5px 8px 30px;
    border:1px solid #ccc;
    background:white url(http://i.imgur.com/lFkqn.png) left center no-repeat;
      -moz-transition: width 0.5s linear !important;
    -webkit-transition: width 0.5s linear !important;
    transition: width 0.5s ease-in-out !important;
}
#search input {
    /*background: none;*/
    /*opacity: 0.1;*/
    width: 30px !important;
    -moz-transition: width 0.5s ease-out !important;
    -webkit-transition: width 0.5s ease-out !important;
    transition: width 0.5s ease-out !important;
    border: 0 !important;
    outline: 0 !important;
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
}
.search:focus {
    /*opacity: 0.9;*/
    width: 200px !important;
    -moz-transition: width 0.5s ease-in-out !important;
    -webkit-transition: width 0.5s ease-in-out !important;
    transition: width 0.5s ease-in-out !important;
    border: default !important;
    background: default !important;
}
<input type="text" class="form-control search left rounded" id="search-bar" placeholder="search" ng-model="search.name"></input>

<!doctype html>
 <html>
  <head>
    <title>example</title>
    <style type="text/css">
      body{
          background-color: #fff;
          }
     .search input.search-text{
          height: 30px;
          border: 0;
          color: #555;
          margin: 0 auto;
          width:25px;
          background:white url(http://i.imgur.com/lFkqn.png) left center no-repeat;
          transition: width 700ms ,background 700ms;    
          -webkit-transition: width 700ms ,background 700ms;
          -moz-transition: width 700ms ,background 700ms;
          -ms-transition: width 700ms ,background 700ms;
          -o-transition: width 700ms ,background 700ms;
           box-shadow: inset 0 1px 1px #444;
          -webkit-box-shadow: inset 0 1px 1px #444;
          -moz-box-shadow: inset 0 1px 1px #444;
          -ms-box-shadow: inset 0 1px 1px #444;
          -o-box-shadow: inset 0 1px 1px #444;

      } 
       .search input.search-text:focus{
            background-color: #e1f0f3;
            width:450px;


       }
   </style>
 </head>
    <body>
      <center>
       <div class="search">
          <input class="search-text" type="text" />
       </div>
     </center>
  </body>
</html>
相关文章：