css-50 Projects in 50 Days(4)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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_wrapper">
<input id="search_input" type="text" placeholder="请输入搜索内容" class="search_input "></input>
<button id="search_btn" class="search_btn ">
<i class="fas fa-search"></i>
</button>
</div>
<script src="./index.js"></script>
</body>
</html>css
body {
display: flex;
align-items: center;
justify-content: center;
background-color: pink;
height: 100vh;
}
.search_wrapper {
display: flex;
align-items: center;
position: relative;
.search_input {
width: 50px;
height: 50px;
border: 0;
padding: 0 16px;
box-sizing: border-box;
transition: .3s all ease;
outline: 0;
}
.search_btn {
width: 50px;
height: 50px;
position: absolute;
left: 0;
top: 0;
border: 0;
font-size: 24px;
cursor: pointer;
background-color: #fff;
transition: .3s all ease;
}
.search_input_active {
width: 200px;
}
.search_btn_active {
transform: translateX(198px);
}
}js
const state = {
searchInputEl: document.querySelector('.search_input'),
searchBtnEl: document.querySelector('.search_btn')
}
state.searchBtnEl.onclick = function () {
state.searchInputEl.classList.toggle('search_input_active')
state.searchInputEl.focus()
state.searchBtnEl.classList.toggle('search_btn_active')
}原文地址：https://blog.csdn.net/qq_38188047/article/details/143758901
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！