寫在前面

搜索框是很常用的一個功能，因此，今天我們一起來練習(xí)寫一個搜索框的效果，希望今天的這個練習(xí)對你有幫助，下面我們一起來看今天練習(xí)的最終效果：

HTML代碼：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>【每日一練】18—搜索框效果的實現(xiàn)</title></head><body>  <div class="search">    <div class="icon"></div>    <div class="input">      <input type="text" name="" id="SearchInput" placeholder="Search">    </div>    <span class="clear" onclick="document.getElementById('SearchInput').value = ''"></span>  </div>  <script type="text/javascript">    const icon = document.querySelector('.icon');    const search = document.querySelector('.search');    icon.onclick = function(){      search.classList.toggle('active');    }</script></body></html>

CSS代碼：

*{  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: 'Poppins', sans-serif;}body{  position: relative;  display: flex;  justify-content: center;  align-items: center;  min-height: 100vh;  background: #fafafa;}.search{  position: relative;  width: 60px;  height: 60px;  background: #fff;  border-radius: 60px;  overflow: hidden;  transition: 0.5s;    box-shadow: 0 0 0 2px #00a6bc;}.search.active{  width: 360px;}.search .icon{  position: absolute;  left: 0;  top: 0;  width: 60px;  height: 60px;  background: #fff;  display: flex;  justify-content: center;  align-items: center;  cursor: pointer;  z-index: 1;}.search .icon:before{  content: '';  position: absolute;  width: 15px;  height: 15px;  border: 3px solid #00a6bc;  border-radius: 50%;  transform: translate(-4px,-4px);  transition: 0.5s;}
.search .icon:after{  content: '';  position: absolute;  width: 3px;  height: 12px;  background:#00a6bc;  transform: translate(6px,6px) rotate(315deg);}
.search .input{  position: relative;  width: 300px;  height: 60px;  left: 60px;  background: #f0f;  display: flex;  justify-content: center;  align-items: center;}.search .input input{  position: absolute;  top: 0;  width: 100%;  height: 100%;  padding: 10px 0;  border: none;  outline: none;  font-size: 18px;}
.clear{  position: absolute;  top: 50%;  transform: translateY(-50%);  right: 15px;  width: 15px;  height: 15px;  display: block;  background: #fff;  cursor: pointer;  display: flex;  justify-content: center;  align-items: center;}.clear:before{  position: absolute;  content: '';  width: 1px;  height: 15px;  background: #999;  transform: rotate(45deg);}.clear:after{  position: absolute;  content: '';  width: 1px;  height: 15px;  background: #999;  transform: rotate(315deg);}

寫在最后

以上就是每日一練的全部內(nèi)容，希望今天的小練習(xí)對你有用，如果你覺得有幫助的話，請點贊我，關(guān)注我，并將它分享給你身邊做開發(fā)的朋友，也許能夠幫助到他。

我是楊小愛，我們明天見。

【每日一練】18—搜索框效果的實現(xiàn)

學(xué)習(xí)更多技能請點擊下方公眾號

學(xué)習(xí)更多技能
請點擊下方公眾號