html :搜索模块包含两个框：输入搜索框和span字体图标
css:span字体图标适用于对齐方法
input搜索框获取焦点宽度变换，以c3动画进行
！ -右侧的搜索栏--divclass=' search-right ' divclass=' search ' input type=' search ' value='高兴的来宾span class=' iconfontion 浮动：左； width: 40%； height: 100%； line-height:36px； background-color: pink； }.search-right input {/* overflow : hidden； */margin: 5px 0 0 32px； width: 250px； height: 25px； border-radius: 12px； padding-left: 5px； color: #ccc； 字体大小： 10px； 操作(/)字体图标)/span(/)的定位方法比较好。 转换为行中的块元素后，无法在input中完全定位。 此外，母箱塌陷问题(/)/*定位：1.几个小对象2.2个或几个项目堆叠在一起) */position: absolute； top:5px； left: 233px； height: 25px； width: 50px； line-height: 25px； 文本照明3360中心； border-radius: 0 12px 12px 0； color :绿色； background-color: #ccc； (/)适合js搜索框的动画效果(/(keyframesmovetoleft )0% ) transform:translatex(0)； } 100 % { transform 3360 translate x (-32px )； }/* 100 % { transform : translate x (0； ()/) }
js:
//2.2失去焦点和焦点的事件var input=document.query selector ('.search ' ).children [0] varspan=document.query selector 更改字体颜色和内容input.addeventlistener('focus )、function () if (this.value=' ye dmj ' )//在输入框中输入动画效果input.style.animation=' move to left 0.5 sforwards ' input.style 666 ' this.style.color=' # 666 ' thimation 更改字体颜色和内容input.addeventlistener ) '，function () if(this.value==' ) /恢复原始样式输入框以更改input.style.animation