输入框输入建议效果
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; margin: 0; padding: 0; } ::-moz-selection { color: #222; background: rgba(0, 0, 0, 0.12); } ::selection { color: #222; background: rgba(0, 0, 0, 0.12); } body { width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; background: #52de97; } input { outline: none; border: 0; } .icons { display: none; } .app { width: 400px; height: 400px; display: grid; place-items: center; } .app .input-container { position: relative; width: 360px; height: 65px; border-radius: 10px; background: #fff; box-shadow: 0 6.7px 5.3px rgba(0, 0, 0, 0.044), 0 22.3px 17.9px rgba(0, 0, 0, 0.066), 0 100px 80px rgba(0, 0, 0, 0.11); backface-visibility: hidden; transform: translateZ(0) scale(1, 1); } .app .input-container.animate { animation: stretch-animation 800ms ease; } .app .input-container [type="text"] { position: absolute; width: 360px; height: 65px; color: #52de97; font-family: "sans-serif"; font-size: 18px; letter-spacing: 2px; padding: 0px 45px 0px 18px; caret-color: #000; background: transparent; z-index: 5; } .app .input-container [type="text"]::placeholder { color: rgba(34, 34, 34, 0.55); } .app .input-container .suggestion-container { width: 360px; height: 65px; position: absolute; left: 0; top: 0; display: flex; align-items: center; color: #907aff; font-family: "sans-serif"; font-size: 18px; letter-spacing: 2px; padding: 0px 45px 0px 18px; pointer-events: none; z-index: 4; } .app .input-container .icon { position: absolute; width: 20px; height: 20px; right: 20px; top: 50%; transform: translateX(0%) translateY(-50%); opacity: 1; transition: all 180ms ease-in; z-index: 10; } .app .input-container .icon.hidden { transform: translateX(80%) translateY(-50%); opacity: 0; } .app .input-container .icon svg { width: 100%; height: 100%; fill: #222; pointer-events: none; } @keyframes stretch-animation { 0% { transform: scale(1, 1); } 10% { transform: scale(1.02, 0.98); } 30% { transform: scale(0.98, 1.02); } 50% { transform: scale(1.02, 0.98); } 100% { transform: scale(1, 1); } } .support { position: absolute; right: 10px; bottom: 10px; padding: 10px; display: flex; } .support a { margin: 0 10px; color: #e1f2fb; font-size: 1.8rem; backface-visibility: hidden; transition: all 150ms ease; } .support a:hover { transform: scale(1.1); } </style> </head> <body translate="no"> <div class="app"> <div class="input-container"> <input type="text" name="text" id="text" placeholder="Type Here" autocomplete="off"> <span class="suggestion-container"></span> <div class="icons-container"> <div class="icon tab-key hidden"> <svg> <use xlink:href="#tab-key"></use> </svg> </div> <div class="icon enter-key hidden"> <svg> <use xlink:href="#enter-key"></use> </svg> </div> </div> </div> </div> <svg class="icons"> <symbol id="tab-key" viewBox="0 0 448 448"> <polygon points="225.813,126.187 302.293,202.667 0,202.667 0,245.333 302.293,245.333 225.813,321.813 256,352 384,224 256,96 " /> <rect x="405.333" y="96" width="42.667" height="256" /> </symbol> <symbol id="enter-key" viewBox="0 0 280.823 280.823"> <path d="m250.734 40.137-90.265-.02v20.059h90.265c5.534 0 10.029 4.515 10.029 10.049v80.216c0 5.534-4.496 10.029-10.029 10.029h-212.34l45.877-45.877-14.182-14.182-70.089 70.088 70.206 70.206 14.182-14.182-45.994-45.994h212.341c16.592 0 30.088-13.497 30.088-30.088v-80.216c0-16.592-13.497-30.088-30.089-30.088z" /> </symbol> </svg> <script> console.clear(); const inputContainerEl = document.querySelector(".input-container"); const textInputEl = document.querySelector("input#text"); const suggestionEl = document.querySelector(".suggestion-container"); const svgTabIcon = document.querySelector(".icon.tab-key"); const svgEnterIcon = document.querySelector(".icon.enter-key"); const ENTER_KEYCODE = 13; const TAB_KEYCODE = 9; const BACKSPACE_KEYCODE = 8; con.........完整代码请登录后点击上方下载按钮下载查看
网友评论0