纯css实现搜索按钮编程搜索框动画效果
代码语言:html
所属分类:搜索
代码描述:纯css实现搜索按钮编程搜索框动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #e3e4e8; --fg: #17181c; --input: #ffffff; --primary: #255ff4; --dur: 1s; font-size: calc(16px + (24 - 16)*(100vw - 320px)/(1280 - 320)); } body, input { color: var(--fg); font: 1em/1.5 Hind, sans-serif; } body { background: var(--bg); display: flex; height: 100vh; } form, input, .caret { margin: auto; } form { position: relative; width: 100%; max-width: 17em; } input, .caret { display: block; transition: all calc(var(--dur) * 0.5) linear; } input { background: transparent; border-radius: 50%; box-shadow: 0 0 0 0.25em inset; caret-color: var(--primary); width: 2em; height: 2em; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input:focus, input:valid { background: var(--input); border-radius: 0.25em; box-shadow: none; padding: 0.75em 1em; transition-duration: calc(var(--dur) * 0.25); transition-delay: calc(var(--dur) * 0.25); width: 100%; height: 3em; } input:focus { animation: showCaret var(--dur) steps(1); outline: transparent; } input:focus + .caret, input:valid + .caret { animation: handleToCaret var(--dur) linear; background: transparent; width: 1px; height: 1.5em; transform: translate(0,-1em) rotate(-180deg) translate(7.5em,-0.25em); } input::-webkit-search-decoration { -webkit-appearance: none; } label { color: #e3e4e8; overflow: hidden; position: absolute; width: 0; height: 0; } .caret { background: currentColor; border-radius: 0 0 0.12.........完整代码请登录后点击上方下载按钮下载查看
网友评论0