Hello, everyone. This is the most lovely demon king 💛💛💛， Today is search box sharing. Search box can be said to be a very, very important point. How to design and realize the function of search box? Let's explain how to realize the luminous search box. There is a lot of information. Don't forget to collect it 💨💨💨
Search box display
💫💫💫💫
💤💤💤💤 (super simple)
This search box is from: Mr. Yasso's browser production 🤣🤣
The production of search box is diverse and different. You can play it according to your own ideas. Then take the first figure I sent above as an example to teach how to realize this search box 🐱 💻🐱 💻
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: 'FontAwesome';
src: url('./fontawesome-webfont.eot');
src: url('./fontawesome-webfont.eot') format('embedded-opentype'),
url('./fontawesome-webfont.woff2') format('woff2'), url('.fontawesome-webfont.woff') format('woff'),
url('./fontawesome-webfont.ttf') format('truetype'),
url('./fontawesome-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.search-box {
font-family: FontAwesome;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
background: #ffffff;
height: 40px;
border: 10px;
border-radius: 40px;
padding: 10px;
opacity: 0;
transition-delay: 99999999s;
transition-duration: 1s;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
color: white;
background: black;
}
.search-btn {
transition: 0.5s;
font-family: FontAwesome;
font-size: 25px;
color: black;
float: right;
width: 40px;
height: 40px;
border: 10px;
border-radius: 50%;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: rgb(51, 159, 150);
font-size: 16px;
transition: 0.6s;
line-height: 50px;
width: 0px;
}
@keyframes flash {
50% {
transform: scale(1.5);
}
80% {
transform: rotate(-60deg);
}
100% {
transform: rotate(30deg);
}
}
html:hover .search-box {
opacity: 1;
transition-delay: 0s;
transition-duration: 0s;
}
</style>
</head>
<body style="background-color: bisque;">
<center>
<div class="search-box">
<input class="search-txt" type='text' id='inp' placeholder="What are you looking for?"/>
<input class="search-btn" type='button' id='btn' value='' />
</div>
<div>
</div>
</center>
</body>
<script>
var oInp = document.getElementById('inp');
var oBtn = document.getElementById('btn');
oBtn.onclick = function () {
Search();
}
document.onkeydown = function () {
if (event.keyCode == 13) {
Search();
}
}
function Search() {
var url = 'https://www.baidu.com/s?wd=' + oInp.value;
window.open(url);
}
</script>
</html>
effect:
Implementation method of search function 🤎🤎🤎
It is mainly implemented in JavaScript. It doesn't matter if you haven't studied JavaScript deeply. The code is very short and easy to understand
Let's focus on this function
function Search() {
var url = 'https://www.baidu.com/s?wd=' + oInp.value;
window.open(url);
}
Take Baidu search as an example. In the follow-up, there can be Google search, CSDN search and so on
Baidu sousu website: https://www.baidu.com/
Parameter interpretation:
s means search. Some websites have written a complete search
"wd =" is the abbreviation of word in English. The parameter represents the content of search keywords. If it is Chinese, the parameter is the hexadecimal form of Chinese characters. If it is English, the parameter is expressed in English
ie refers to the search method
"s?wd" usually appears together 💨 For more parameters, click: Baidu search parameters
Baidu, Google and many different websites have different search parameters
For example, CSDN search method: take "Crawler" as an example
https://so.csdn.net/so/search?from=chrome_plugin&q= Crawler = & sourceid = Chrome & ie = UTF-8
In the follow-up, I will analyze the search URLs of major common websites, so I won't spend too much space here
Well, that's the end of today's sharing. If you think this blog is helpful to you, don't forget to praise, pay attention and comment. See you next time 💨
