<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } body { display: flex; justify-content: center; align-items: center; } .box { position: relative; width: 300px; height: 40px; } .inp { width: 100%; height: 100%; border-radius: 8px; border: 1px solid #000; padding-left: 20px; outline: none; } .icon { position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; -webkit-transition: 0.3s; transition: 0.3s; } </style> <script type="text/javascript"> let inpValue = '' function hideIcon() { const icon = document.getElementsByClassName('icon')[0]; // icon.style.display = "none"; if (!inpValue) { icon.style.display = "block"; } else { icon.style.display = "none" } icon.style.transform = 'rotateY(90deg)' } function showIcon() { const icon = document.getElementsByClassName('icon')[0]; // icon.style.display = "block"; if (inpValue) { icon.style.display = "none"; } else { icon.style.display = "block"; setTimeout(() => { icon.style.transform = 'rotateY(0deg)' }, 60) } } function inputEvent(e) { inpValue = e.value } </script> </head> <body> <div class="box"> <input class="inp" type="text" onfocus="hideIcon()" onblur="showIcon()" oninput="inputEvent(this)"> <img class="icon" src="http://common.static.sangeayi.cn/jmqh/%E6%90%9C%E7%B4%A2.png" alt=""> </div> </body> </html>
搜索框搜索icon的动效
猜你喜欢
转载自www.cnblogs.com/roberthuang/p/11470956.html
今日推荐
周排行