day04 隐藏搜索框

最新推荐文章于 2022-07-25 19:05:03 发布

qq_45738402

最新推荐文章于 2022-07-25 19:05:03 发布

阅读量285

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_45738402/article/details/125817629

版权

这里写目录标题

隐藏搜索框
- html
- js
- CSS

隐藏搜索框

效果图
在这里插入图片描述

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏搜索框</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="search-container">
        <input type="text" placeholder="Search...">
        <button><i class="fas fa-search"></i></button>
    </div>
    <script src="index.js"></script>
</body>
</html>

js


window.onload = function (){
    const search = document.getElementsByClassName('search-container')[0];
    const btn = search.getElementsByTagName('button')[0];
    btn.onclick = function (){
        if(search.classList.contains('search')){
            search.classList.remove('search');
        }else{
            search.classList.add('search');
        }

    }
}

CSS


*{
  margin: 0;
  padding: 0;
}
body{
  background-color: #7b5dfa;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

}
.search-container{
  position: relative;
  height: 50px;
  input{
    width: 50px;
    height: 50px;
    font-size: 18px;
    border: 0;
    transition: width ease-in 0.3s;
  }
  button{
    height: 50px;
    width: 50px;
    border: 0;
    font-size: 24px;
    position: absolute;
    left: 0;
    top:0;
    background-color: white;
    cursor: pointer;
    transition: transform ease-in 0.3s;
  }
  input:focus,
  button:focus{
    outline: none;
  }
}
.search input{
  width: 200px;
}
.search button{
  transform: translateX(200px);
}