搜索按钮点击弹出搜索框效果
代码语言:html
所属分类:表单美化
代码描述:搜索按钮点击弹出搜索框效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Varela+Round&display=swap'> <style> .search { --background: #ffffff; --text-color: #414856; --primary-color: #4F29F0; --border-radius: 10px; --width: 190px; --height: 55px; background: var(--background); width: auto; height: var(--height); position: relative; overflow: hidden; border-radius: var(--border-radius); box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05); display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .search input[type="text"] { position: relative; width: var(--height); height: var(--height); font: 400 16px 'Varela Round', sans-serif; color: var(--text-color); border: 0; box-sizing: border-box; outline: none; padding: 0 0 0 40px; -webkit-transition: width .6s ease; transition: width .6s ease; z-index: 10; opacity: 0; cursor: pointer; } .search input[type="text"]:focus { z-index: 0; opacity: 1; width: var(--width); } .search input[type="text"]:focus ~ .symbol::before { width: 0%; } .search input[type="text"]:focus ~ .symbol:after { -webkit-clip-path: inset(0% 0% 0% 100%); clip-path: inset(0% 0% 0% 100%); -webkit-transition: -webkit-clip-path .04s linear .105s; transition: -webkit-clip-path .04s linear .105s; transition: clip-path .04s linear .105s; transition: clip-path .04s linear .105s, -webkit-clip-path .04s linear .105s; } .search input[type="text"]:focus ~ .symbol .cloud { top: -30px; left: -30px; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: all .6s ease; transition: all .6s ease; } .search input[type="text"]:focus ~ .symbol .lens { top: 20px; left: 15px; -webkit-transform: translate(0, 0); transform: translate(0, 0); fill: var(--primary-color); -webkit-transition: top .5s ease .1s, left .5s ease .1s, fill .3s ease; transition: top .5s ease .1s, left .5s ease .1s, fill .3s ease; } .search .symbol { height: 100%; width: 100%; position: absolute; top: 0; z-index: 1; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .search .symbol:before { content: ""; position: absolute; right: 0; width: 100%; height: 100%; background: var(--primary-color); z-index: -1; -webkit-transition: width .6s ease; transition: width .6s ease; } .search .symbol:after { content: ""; position: absolute; top: 21px; left: 21px; width: 20px; height: 20px; border-radius: 50%; back.........完整代码请登录后点击上方下载按钮下载查看
网友评论0