第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前端开发】
有误，音乐播放器那个代码不能实现
I do believe all the ideas youve presented for your post They are really convincing and will certainly work Nonetheless the posts are too short for novices May just you please lengthen them a little from subsequent time Thanks for the post