jquery实现搜索图标点击变成搜索输入框输入下拉推荐效果代码
代码语言:html
所属分类:搜索
代码描述:jquery实现搜索图标点击变成搜索输入框输入下拉推荐效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/aos.css"> <style> @import url("https://fonts.googleapis.com/css?family=Overlock"); body { background: #201c29 !important; } .frame { position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin-top: -200px; margin-left: -200px; border-radius: 2px; background: #643a7a; box-shadow: 0.5rem 1rem 1rem rgba(0, 0, 0, 0.6); overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; justify-content: center; align-items: center; } form { display: flex; } .circle { border: 3px solid white; border-radius: 50%; display: flex; width: 4rem; height: 4rem; box-shadow: 0.4rem 0.6rem 0.6rem rgba(0, 0, 0, 0.2); z-index: 2000; transition: 1s; align-items: center; justify-content: flex-start; background: #643a7a; overflow: hidden; } .expand { width: 15rem; border-radius: 0; } form { width: 15rem; } .form-control { border: none; outline: none !important; box-shadow: none !important; opacity: 0; background: transparent !important; font-family: "overlock"; font-size: 1.2rem; } .show { opacity: 1; transition: 1s; } input { outline: none; border: none !important; color: white !important; } ::-moz-placeholder { color: rgba(255, 255, 255, 0.6) !important; } :-ms-input-placeholder { color: rgba(255, 255, 255, 0.6) !important; } ::placeholder { color: rgba(255, 255, 255, 0.6) !important; } .btn { font-size: 125%; border-radius: 0; padding: 0.5rem; z-index: 1000; transition: 1s; } .btn i { color: white; } .btn:focus { box-shadow: none !important; } .hide { opacity: 0; z-index: -1; } .fa-spinner { position: absolute; left: 40%; top: 30%; color: rgba(255, 255, 255, 0.5); font-size: 2000%; -webkit-animation: loading 3s ease-in-out infinite; animation: loading 3s ease-in-out infinite; } @-webkit-keyframes loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .handle { position: absolute; top: 58%; left: 54%; background: white; box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.5); width: 2rem; height: 4px; border-radius: 2px; transform: rotate(45deg); z-index: 1; transition: 1s; } .tidy { transform: translateY(-2rem) rotate(0); } form .suggestio.........完整代码请登录后点击上方下载按钮下载查看
网友评论0