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>
js
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 }
展开收缩添加了动画效果，略有瑕疵