50Days50Projects之day03-搜索框交互效果 

<!-- run -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');

.container {
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  background-image: linear-gradient(90deg, #c93222, #e57814);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.search {
  position: relative;
  height: 50px;
}

.search .input {
  font-family: inherit;
  background-color: #fff;
  border: 0;
  font-size: 16px;
  padding: 15px;
  height: 50px;
  width: 50px;
  transition: width 0.3s ease;
}

.btn {
  background-color: #fff;
  color: #e52fb6;
  border: none;
  cursor: pointer;
  font-size: 24px;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  transition: transform 0.3s ease;
}

.input:focus,
.btn:focus {
  outline: none;
}

.search.active .input {
  width: 200px;
}

.search.active .btn {
  transform: translateX(198px);
}

</style>

<div class="container">
       <div class="search">
      <!--Active-->
      <input class="input" type="text" placeholder="请输入关键字🔍..." />
      <button class="btn">
        <i class="fa-brands fa-searchengin"></i>
      </button>
    </div> 
</div>

<script>
   const search = document.querySelector('.search')
const input = document.querySelector('.input')
const btn = document.querySelector('.btn')

btn.addEventListener('click', () => {
  search.classList.toggle('active')
  input.focus()
})

</script>

JS

const search = document.querySelector('.search')
const input = document.querySelector('.input')
const btn = document.querySelector('.btn')

btn.addEventListener('click', () => {
  search.classList.toggle('active')
  input.focus()
})

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-image: linear-gradient(90deg, #c93222, #e57814);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.search {
  position: relative;
  height: 50px;
}

.search .input {
  font-family: inherit;
  background-color: #fff;
  border: 0;
  font-size: 16px;
  padding: 15px;
  height: 50px;
  width: 50px;
  transition: width 0.3s ease;
}

.btn {
  background-color: #fff;
  color: #e52fb6;
  border: none;
  cursor: pointer;
  font-size: 24px;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 50px;
  transition: transform 0.3s ease;
}

.input:focus,
.btn:focus {
  outline: none;
}

.search.active .input {
  width: 200px;
}

.search.active .btn {
  transform: translateX(198px);
}


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Hidden Search</title>
  </head>
  <body>
    <div class="search">
      <!--Active-->
      <input class="input" type="text" placeholder="Hızlı Arama..." />
      <button class="btn">
        <i class="fa-brands fa-searchengin"></i>
      </button>
    </div>

    <script src="app.js"></script>
  </body>
</html>

效果如下👇

posted @ 2022-06-09 22:43  CoderWGB  阅读(24)  评论(0)    收藏  举报