纯css+html实现伸缩式动态搜索框

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

前言

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

实现

实现过程

搜索框隐藏+显示

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

.search-txt {
    border: none;
    background: none;
    outline: none;
    padding: 0;
    color: #222;
    font-size: 16px;
    line-height: 40px;
    width: 0;
    transition: 0.4s;
}
.search-btn {
    color: #888888;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.4s;
}
.search-box:hover .search-txt {
    width: 200px;
    padding: 0 12px;
}

旋转搜索按钮

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

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

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

下划线

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

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

总结

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