第250练的最终效果如下：
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>第250练</title><link rel=”stylesheet” href=”index.css” /></head><body><div class=”search-bar-container active”><imgsrc=”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 …” /><imgsrc=”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;}.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”);});
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
有误，音乐播放器那个代码不能实现