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

<div class="search-box">

  <a class="search-btn">

    <i class="fa fa-search" aria-hidden="true"></i>

  </a>

  <input type="text" class="search-txt" placeholder="搜索" />

  <div class="search-line"></div>

</div>

 

body {

    margin: 0;

    padding: 0;

    width: 100%;

    height: 100%;

    background: #f8cb59;

}

.search-line {

    position: absolute;

    left: 62px;

    bottom: 10px;

    width: 0px;

    height: 2px;

    ">rgb(251, 121, 0);

    transition: 0.3s;

}

.search-box {

    position: absolute;

    bottom: 30px;

    left: 30px;

    ">white;

    box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.1);

    height: 40px;

    padding: 10px;

    border-radius: 40px;

    display: flex;

}

.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;

}

.search-box:hover .search-btn {

    ">;

    animation: rotate 0.4s linear;

}

.search-txt:focus {

    width: 200px;

    padding: 0 12px;

}

.search-txt:focus + .search-line {

    width: 200px;

}

@keyframes rotate {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}