制作一个能收缩展开的搜索框

html

1 <!-- 搜索 -->
2     <div class="input-card-soso" id="yincang">
3         <div class="input-item">
4             <label class="sousuo" >搜索<input id='tipinput' type="text"  value="" ><img class="dakai" src="img/souqi.png" alt=""  onclick=" upSousuo()"></label>
5             
6         </div>
7     </div>

 1 // 隐藏搜索框
 2     function upSousuo() {
 3            
 4             if ($('.dakai').attr("src") == "img/souqi.png") {
 5 
 6 
 7                 $('.dakai').attr("src", "img/zankai.png")
 8 
 9                 document.getElementById("yincang").style.animationName = "example2";
10                 document.getElementById("tipinput").style.animationName = "example3";
11                 document.getElementById("yincang").style.animationDuration = "1s";
12                 document.getElementById("tipinput").style.animationDuration = "2s";
13 
14                 document.getElementById("yincang").style.minWidth = "3rem";
15                 document.getElementById("yincang").style.width = "3rem";
16                 document.getElementById("tipinput").style.display = "none";//隐藏
17  
18                
19             } else {
20                 $('.dakai').attr("src", "img/souqi.png")
21                 
22                 document.getElementById("yincang").style.animationName = "example";
23                 document.getElementById("tipinput").style.animationName = "example1";
24                 document.getElementById("yincang").style.animationDuration = "1s";
25                 document.getElementById("tipinput").style.animationDuration = "2s";
26 
27                 
28                 document.getElementById("yincang").style.width = "16rem";
29                 document.getElementById("tipinput").style.display = "";//显示
30                 
31                 
32             }
33         }

css

 1 .sousuo{
 2   color: #23539c;
 3 }
 4 .dakai{
 5     width: 20px;
 6     height: 20px;
 7     /* float: right; */
 8     position: fixed;
 9 }
10 #yincang{
11   animation-name: example;
12   animation-duration: 1s;
13  
14 }
15 #tipinput{
16   animation-name: example1;
17   animation-duration: 1s;
18 }
19 
20 @keyframes example {
21   0%   {width: 0rem; }
22   /* 25%  { 4rem; }
23   50%  { 8rem; }
24   75%  { 12rem; } */
25   100% {width: 16rem; }
26 }
27 @keyframes example1 {
28   0%   {display: none; }
29   15%  {width: 0rem; }
30   /* 25%  { 3rem; }
31   50%  { 6rem; } */
32   75%  {width: 12rem; }
33   100% {display: ''; }
34 }
35 @keyframes example2 {
36   0% {width: 16rem; }
37   /* 25%  { 12rem; }
38   50%  { 8rem; }
39   75%  { 4rem; } */
40   100%   {width: 0rem; }
41  
42  
43 }
44 @keyframes example3 {
45   0%   {display: ''; }
46   15%  {width: 12rem; }
47   /* 25%  { 6rem; }
48   50%  { 3rem; } */
49   75%  {width: 3rem; }
50   100% {display: none; }
51 }
52 #tipinput{
53   font-size: 15px;
54   color: #888;
55   border-left: 1px solid #fff;
56   border-right: 1px solid #fff;
57   border-top: 1px solid #fff;
58   border-bottom: 1px solid #3385ff;
59   padding: 2px;
60   border-radius: 2px;
61    
62 }

展开收缩添加了动画效果，略有瑕疵

世界上没有什么偶然，有的只有必然。——壹原侑子