JavaScript动画搜索栏
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
HTML:
|
<!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" /> <title>Animated Search Bar</title> <link rel="stylesheet" href="style.css" /> </head>
<body> <div class="search-bar-container active"> <img src="https://cdn4.iconfinder.com/data/icons/evil-icons-user-interface/64/magnifier-512.png" alt="magnifier" class="magnifier" /> <input type="text" class="input" placeholder="Search ..." /> <img src="https://cdn1.iconfinder.com/data/icons/google-s-logo/150/Google_Icons-25-512.png" alt="mic-icon" class="mic-icon" /> </div> <script src="index.js"></script> </body>
</html> |
CSS:
|
body { margin: 0; display: flex; justify-content: center; height: 100vh; align-items: center; background-color: aliceblue; }
.search-bar-container { display: flex; align-items: center; background-color: aliceblue; padding: 5px; width: 300px; height: 50px; border-radius: 50px; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2), -6px -6px 10px rgba(255, 255, 255, 0.7); margin: 10px; position: relative; transition: width 1.5s; }
.magnifier { width: 25px; cursor: pointer; position: absolute; left: 20px; }
.mic-icon { width: 30px; position: absolute; right: 10px; transition: width 0.4s; transition-delay: 1s; }
.input { background-color: transparent; border: none; margin: 10px 50px; width: 100%; outline: none; color: rgb(100, 100, 100); transition: width 1s; transition-delay: 0.5s; font-weight: bold; }
.active.search-bar-container { width: 50px; }
.active .input { width: 0; }
.active .mic-icon { width: 0; } |
JS:
|
const searchBarContainerEl = document.querySelector(".search-bar-container"); const magnifierEl = document.querySelector(".magnifier"); magnifierEl.addEventListener("click", () => { searchBarContainerEl.classList.toggle("active"); }); |
