我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

本文将要介绍如何用纯css加上html实现一个伸缩式的搜索框，相信平时应该会经常在各种网站上看到这种动态按钮，通过移入之后才会展示可以输入，或者点击的内容，今天就来用html+css实现一个。

代码中的搜索框一开始隐藏之后展示的效果主要是通过css过渡效果实现的，我们在一开始的时候把输入框的宽度设定为0，这样在界面上就无法看到这个输入框，然后在移入搜索按钮的时候，就把输入框的宽度改变为正常值，通过transition属性的过渡效果，我们就能够看到图中的展开效果了，并且可以通过设定过渡时间来决定这个展开的时间。

然后就是搜索按钮的旋转效果，是通过css动画实现的，通过css旋转参数 transform: rotate(0deg); 参数为一个角度，在移入按钮之后，我们可以为按钮添加一个动画效果：

这个动画的效果就是元素360旋转一圈，然后将这个动画添加到鼠标移入按钮之后的按钮上，就能够实现按钮旋转的动效了。

其实下划线的实现和搜索框是完全相同的，我们先事先设定好下划线的位置，然后通过设定宽度为0进行隐藏，在用户一点击输入框的时候，将下划线的宽度修改成为和输入框相同的宽度，并且通过css的过渡效果，就能够得到一个慢慢展开的下划线了

然后可能会存在一个问题，就是当我们的指针移开输入框点击别的地方的时候，下划线和搜索框都会缩小为0隐藏，这时候要注意，下划线的过渡时间不应该比搜索框还长，不然就会造成搜索框以及收缩完毕，下划线还在路上，就会造成视觉上的不太美观。

本文主要是通过过渡和动画效果实现了一个简单的动态搜索框，以此深入理解一下css的过渡以及动画效果。