css实现6款不同风格的搜索框效果代码
代码语言:html
所属分类:搜索
代码描述:css实现6款不同风格的搜索框效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/fontawesome.5.3.1.css"> <style> /* Reset */ *, *:before, *:after { margin: 0; padding: 0; box-sizing: inherit; } html { box-sizing: border-box; } /* ********* */ /* font-size */ /* utopia.fyi */ :root { --step--2: clamp(0.91rem, calc(0.89rem + 0.10vw), 0.96rem); --step--1: clamp(1.09rem, calc(1.05rem + 0.21vw), 1.20rem); --step-0: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.50rem); --step-1: clamp(1.58rem, calc(1.46rem + 0.59vw), 1.88rem); --step-2: clamp(1.89rem, calc(1.71rem + 0.89vw), 2.34rem); --step-3: clamp(2.27rem, calc(2.01rem + 1.29vw), 2.93rem); --step-4: clamp(2.72rem, calc(2.36rem + 1.83vw), 3.66rem); --step-5: clamp(3.27rem, calc(2.75rem + 2.56vw), 4.58rem); } /* space */ :root { --space-3xs: clamp(0.31rem, calc(0.29rem + 0.12vw), 0.38rem); --space-2xs: clamp(0.69rem, calc(0.66rem + 0.12vw), 0.75rem); --space-xs: clamp(1.00rem, calc(0.95rem + 0.24vw), 1.13rem); --space-s: clamp(1.31rem, calc(1.24rem + 0.37vw), 1.50rem); --space-m: clamp(2.00rem, calc(1.90rem + 0.49vw), 2.25rem); --space-l: clamp(2.63rem, calc(2.48rem + 0.73vw), 3.00rem); --space-xl: clamp(3.94rem, calc(3.72rem + 1.10vw), 4.50rem); --space-2xl: clamp(5.25rem, calc(4.96rem + 1.46vw), 6.00rem); --space-3xl: clamp(7.88rem, calc(7.44rem + 2.20vw), 9.00rem); /* One-up pairs */ --space-3xs-2xs: clamp(0.31rem, calc(0.14rem + 0.85vw), 0.75rem); --space-2xs-xs: clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem); --space-xs-s: clamp(1.00rem, calc(0.80rem + 0.98vw), 1.50rem); --space-s-m: clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem); --space-m-l: clamp(2.00rem, calc(1.61rem + 1.95vw), 3.00rem); --space-l-xl: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.50rem); --space-xl-2xl: clamp(3.94rem, calc(3.13rem + 4.02vw), 6.00rem); --space-2xl-3xl: clamp(5.25rem, calc(3.79rem + 7.32vw), 9.00rem); /* Custom pairs */ --space-s-l: clamp(1.31rem, calc(0.65rem + 3.29vw), 3.00rem); } :root { --black: #23252f; --neon-green: #64ed85; --white: rgb(215, 218, 215); } /*************************** */ body { background: var(--black); font-family: lato; overflow-x: hidden; } .container { width: 100%; /* border: green solid 4px; */ } .search { width: 100%; max-width: 60%; margin: 0 auto; min-height: 120vmin; /* border: solid red 2px; */ position: relative; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; } .searchbar-box, .searchbar-box2, .searchbar-box3, .searchbar-box4, .searchbar-box5, .searchbar-box6 { display: flex; justify-content: center; align-items: center; width: 100%; } .searchbar { border: solid yellow 2px; transition: all .3s; border: none; background: #23252f; box-shadow: inset 5px -5px 10px #13141a, inset -5px 5px 10px #333644; } .searchbar, .searchbar2 { padding: var(--space-xs); width: 60%; max-width: 40%; border-radius: 60px; } .searchbar:focus, .searchbar2:focus { outline: none; max-width: 47%; transition: all .3s; } input::-webkit-input-placeholder { color: var(--white); transition: all .3s; } .searchbar:focus input:focus::-webkit-input-placeholder { filter: opacity(.5); transition: all .3s; } .icon1 { text-decoration: none; color: var(--white); padding: var(--space-2xs); border-radius: 50%; margin-left: -3.3rem; font-size: var(--step-0); } /* ********************** */ /* No 2 */ .searchbar2 { background: var(--black); border: var(--neon-green) 3px solid; transition: all .3s; } .icon2 { background-color: var(--neon-green); text-decoration: none; padding: var(--space-xs); font-size: var(--step-0); height: 100%; border-radius: 50%; margin-left: -3rem; color: var(--black); } .searchbar-box2 input::-webkit-input-placeholder { color: var(--neon-green); filter: opacity(.6); transition: all .3s; } .searchbar-box2 input:focus::-webkit-input-placeholder { filter: opacity(.8); transition: all .3s; } /* **************** */ /* No 3 */ .searchbar3 { background: var(--black); padding: var(--space-xs); transition: all .5s; border: none; border-bottom: solid 2px var(--white); width: 60%; max-width: 40%; } .searchbar3:focus { outline: none; border: solid 3px var(--white); transition: all .5s; border-radius: 20px; } .icon3 { text-decoration: none; margin-left: -2.5rem; color: var(--white); font-size: var(--step-0); } /* *************** */ /* No 4 */ .searchbar-box4 { display: fl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0