前端实例练习 - 动效伸缩搜索框

动效伸缩搜索框

代码储存在Github
效果预览

初衷：很多人在初学前端的时候都会问，“如何入门前端？”
同为在前端学习道路上，奋力追赶的一员，本人对于目前网络上所能看到的 “入门级” 的教材并不太满意。学习一门新知识，实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。
希望能够与大家互相分享，共同进步。

HTML 部分

    <input type="text" name="search" placeholder="请输入" class="animatedSearch">

CSS 部分

.animatedSearch {
    width: 10%;
    border: 1px solid #ccc;
    font-size: 1.2rem;
    border-radius: 5px;
    padding: 5px 8px;
    color: #333;
    transition: width 0.4s ease-in-out;
}

/**/
.animatedSearch:focus {
    width: 50%;
}

---

好啦，现在所有的代码都写完啦！

赶快打开浏览器，看看效果吧！

在这里，只是给大家提供一种思路，参考。
具体的实现，每个人都可以有不同的方法。
请大家赶快发挥想象，把你最想实现的功能，在电脑敲出来吧！

参考自w3cschools