(资料图片仅供参考)
欢迎来的我的小院，恭喜你今天又要涨知识了！
案例内容
利用JavaScript实现搜索框的移动展开。
演示
学习
小院里的霍大侠 
<script> const searchBarContainerEI=document.querySelector(".search-bar-container"); const magnifierEI=document.querySelector(".magnifier"); magnifierEI.addEventListener("click",()=>{ searchBarContainerEI.classList.toggle("active"); }); </script>总结思考
学习点： 1、align-items：flex子项们相对于flex容器在垂直方向上的对齐方式2、transition ：设置元素的过渡效果3、cursor：定义了鼠标指针放在一个元素边界范围内时所用的光标形状4、boder:none ：没有边框5、outline:none ：去除输入框蓝框6、transition-delay ：规定过渡效果何时开始7、document.querySelector()返回一个元素的信息8、element.classList.toggle：当点击标签时，会给这个标签添加或消除一个类
使用JavaScript完成搜索框的移动展开，可以使界面更加生动有趣，让网页更加多样化。
关注我，跟着我每天学习一点点，让你不在枯燥，不在孤单..
全网可搜：小院里的霍大侠， 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。私微信：huodaxia_xfeater二维码： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg公众号：有个小院（微信公众号：yougexiaoyuan）github：yougexiaoyuan (视频源码免费获取)（部分素材来源于互联网，如有保护请联系作者）
