其他
【每日一练】93—实现一个搜索框的动画效果
写在前面
今天写的这个小练习是一个搜索框的动画效果，关于这个搜索框的效果，我在之前的一些练习中，也跟大家分享过一期3D效果的搜索框。
而今天这个效果，可能更加实用一点，毕竟3D效果，并不是每个项目都会使用，使用多的还是一些NFT，游戏类型或者是一些3D素材的网站上。
一般情况下，我们还是更加趋向于用今天练习项目中的这种效果，具体效果请看下面的截图：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>【每日一练】93—实现一个搜索框的动画效果</title></head><body> <div class="searchBox"> <div class="search"> <ion-icon name="search-outline"></ion-icon> </div> <div class="searchInput"> <input type="text" placeholder="输入你要查找的内容"> </div> <div class="close"> <ion-icon name="close-outline"></ion-icon> </div> </div> <!--字体图标文件--> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script> const search = document.querySelector('.search'); const close = document.querySelector('.close'); const searchBox = document.querySelector('.searchBox'); search.onclick = function(){ searchBox.classList.add('active'); } close.onclick = function(){ searchBox.classList.remove('active'); }</script></body></html>*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Ubuntu', sans-serif;}body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #6aa7d4; background: linear-gradient(45deg,#4E65FF ,#92EFFD);}.searchBox { position: relative; width: 60px; height: 60px; background: #fff; display: flex; justify-content: space-between; transition: 0.5s; overflow: hidden; box-shadow: 0 25px 35px rgba(0,0,0,0.1);}.searchBox.active { width: 360px;}.search { position: relative; width: 60px; height: 60px; display: flex; color: #333; justify-content: center; align-items: center; font-size: 1.5em; cursor: pointer;} .close { position: absolute; right: 0; width: 50px; height: 60px; display: flex; color: #333; justify-content: center; align-items: center; scale: 0; cursor: pointer; font-size: 1.25em; transition: 0.5s; transition-delay: 0s;}.searchBox.active .close { scale: 1; transition-delay: 0.5s;}.searchInput { position: absolute; left: 60px; width: calc(100% - 120px); height: 100%; line-height: 60px; background: #f00;}.searchInput input { position: absolute; width: 100%; height: 100%; border: none; outline: none; font-size: 1.25em;}写在最后
以上就是我今天跟大家分享的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号