js+css实现下拉提示弹出的搜索框效果代码
代码语言:html
所属分类:搜索
代码描述:js+css实现下拉提示弹出的搜索框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300); html, body { height: 100vh; width: 100vw; margin:0;padding:0; } body { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; background: #007991; background: -webkit-gradient(linear, left top, left bottom, from(#78ffd6), to(#007991)); background: linear-gradient(to bottom, #78ffd6, #007991); } .type-ahead { width: 100%; max-width: 250px; position: relative; -webkit-perspective: 500px; perspective: 500px; } .type-ahead__input { padding: 12px 34px 12px 12px; border: none; border-radius: 0; font-size: 14px; letter-spacing: .4px; caret-color: #007991; color: #007991; outline: none; width: calc(100% - 46px); box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, 0.1); } .type-ahead__input::-webkit-input-placeholder { opacity: .5; -webkit-transition: opacity .2s linear; transition: opacity .2s linear; color: #6E6E6E; } .type-ahead__input::-moz-placeholder { opacity: .5; -moz-transition: opacity .2s linear; transition: opacity .2s linear; color: #6E6E6E; } .type-ahead__input:-ms-input-placeholder { opacity: .5; -ms-transition: opacity .2s linear; transition: opacity .2s linear; color: #6E6E6E; } .type-ahead__input::-ms-input-placeholder { opacity: .5; -ms-transition: opacity .2s linear; transition: opacity .2s linear; color: #6E6E6E; } .type-ahead__input::placeholder { opacity: .5; -webkit-transition: opacity .2s linear; transition: opacity .2s linear; color: #6E6E6E; } .type-ahead__input:focus::-webkit-input-placeholder { opacity: .7; } .type-ahead__input:focus::-moz-placeholder { opacity: .7; } .type-ahead__input:focus:-ms-input-placeholder { opacity: .7; } .type-ahead__input:focus::-ms-input-placeholder { opacity: .7; } .type-ahead__input:focus::placeholder { opacity: .7; } .type-ahead .icon { position: absolute; right: 8px; top: 8px; fill: #6E6E6E; -webkit-transform: scale(0.8); transform: scale(0.8); fill: #007991; } .type-ahead__suggestions { padding: 4px 0; background-color: #fff; width: 100%; position: absolute; top: 42px; margin: 0; -webkit-transform-origin: top; transform-origin: top; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transition: opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s, -webkit-transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s; transition: opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s, -webkit-transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s; transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s, opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s; transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s, opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s, -webkit-transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s; } .type-ahead__s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0