动效伸缩搜刮框

代码储存在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