CSS实现隐藏搜索框功能(动画正反向序列)

来具体讲解一下CSS实现隐藏搜索框功能（动画正反向序列）的完整攻略。

1. 准备工作

在进行实现前，需要先准备好以下内容：

• HTML结构：需要一个包含搜索框和按钮的HTML基础结构。
• CSS基础样式：设置基础样式，包括搜索框和按钮的大小、位置、字体、颜色等。

2. 实现隐藏搜索框功能

接下来进入正式的实现过程。针对隐藏搜索框的需求，我们可以通过以下两种方式来达成。

2.1 利用动画实现

我们可以利用CSS3中的动画效果来实现搜索框的隐藏动画。可以使用@keyframes来定义动画序列，再在搜索框样式中利用动画属性加上这个序列即可。

@keyframes hide-input {
  0% {
    width: 200px;
  }
  100% {
    width: 0;
    padding: 0;
    border: none;
  }
}
.input {
  animation: hide-input 0.5s ease forwards;
}

上面的代码中，我们定义了一个hide-input的动画序列，包括了搜索框宽度的变化，以及搜索框的边框、内边距的变化。然后在搜索框样式中设置animation属性，将动画序列加上去，实现搜索框的隐藏动画效果。

2.2 利用类名切换实现

除了使用动画效果，还可以通过添加和移除类名的方式来切换搜索框的样式，从而达到隐藏的效果。

首先，在html结构中，我们需要为搜索框和按钮分别添加一个类名input和btn。

<div class="search-bar">
  <input type="text" class="input" placeholder="请输入搜索内容">
  <button class="btn">搜索</button>
</div>

然后在CSS样式中，我们针对.input和.btn分别设置需要用到的样式。

.input {
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  padding: 2px 10px;
  font-size: 16px;
  transition: all 0.5s ease;
}

.btn {
  width: 60px;
  height: 36px;
  background: #f60;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.5s ease;
}

最后，我们可以添加一个hide的类名，实现搜索框显示和隐藏的切换效果。

.input.hide {
  width: 0;
  padding: 0;
  border: none;
}

.btn.hide {
  margin-left: -60px;
  opacity: 0;
}

.search-bar:hover .btn.hide {
  opacity: 1;
  margin-left: 10px;
}

在添加了hide类名之后，我们就可以实现搜索框的隐藏和显示切换功能了。当鼠标移动到搜索框上时，按钮会显示出来。

3. 实现动画正反向序列

针对动画正反向序列的问题，我们可以通过在@keyframes中定义“正向”和“反向”的动画序列，再在.input.hide的样式中使用animation-direction: reverse来实现反向动画的效果。

@keyframes hide-input {
  0% {
    width: 200px;
  }
  100% {
    width: 0;
    padding: 0;
    border: none;
  }
}

@keyframes show-input {
  0% {
    width: 0;
    padding: 0;
    border: none;
  }
  100% {
    width: 200px;
  }
}

.input {
  animation: hide-input 0.5s ease forwards;
}

.input.hide {
  animation: show-input 0.5s ease forwards;
  animation-direction: reverse;
}

上述代码中，我们分别定义了hide-input和show-input两个动画序列，分别代表搜索框的隐藏和显示动画，然后在.input和.input.hide样式中分别使用这两个动画序列，并在.input.hide的样式中添加反向动画animation-direction: reverse，以达到正反向序列的效果。

4. 示例说明

下面我们来看两个用例，分别使用了动画实现和类名切换实现，来演示隐藏搜索框功能的效果。

4.1 示例一（动画实现）

<div class="search-bar">
  <input type="text" class="input" placeholder="请输入搜索内容">
  <button class="btn">搜索</button>
</div>

<style>
  .input {
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
    padding: 2px 10px;
    font-size: 16px;
  }

  .btn {
    width: 60px;
    height: 36px;
    background: #f60;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
  }

  @keyframes hide-input {
    0% {
      width: 200px;
    }
    100% {
      width: 0;
      padding: 0;
      border: none;
    }
  }

  .input {
    animation: hide-input 0.5s ease forwards;
  }
</style>

上述代码演示了用动画实现隐藏搜索框功能的效果。在鼠标移动到搜索框上时，搜索框会被隐藏。

4.2 示例二（类名切换实现）

<div class="search-bar">
  <input type="text" class="input" placeholder="请输入搜索内容">
  <button class="btn">搜索</button>
</div>

<style>
  .input {
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
    padding: 2px 10px;
    font-size: 16px;
    transition: all 0.5s ease;
  }

  .btn {
    width: 60px;
    height: 36px;
    background: #f60;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.5s ease;
  }

  .input.hide {
    width: 0;
    padding: 0;
    border: none;
  }

  .btn.hide {
    margin-left: -60px;
    opacity: 0;
  }

  .search-bar:hover .btn.hide {
    opacity: 1;
    margin-left: 10px;
  }
</style>

<script>
  var input = document.querySelector('.input');
  var btn = document.querySelector('.btn');

  btn.addEventListener('click', function() {
    input.classList.toggle('hide');
    btn.classList.toggle('hide');
  });
</script>

上述代码演示了用类名切换实现隐藏搜索框功能的效果。在点击按钮后，搜索框会被隐藏或显示，而且在鼠标移动到搜索框上时，按钮会显示出来。

希望以上的解答能够帮助你，如果还有其它问题，可以继续提问哦。