大家好，这里是最可爱的大魔王💛💛💛，今天是搜索框分享，搜素框可以说是非常非常重要的一个点啦，关于搜素框到底怎么设计、功能怎么实现的？发光搜素框怎么实现等问题做一个解释，信息量很大，别忘了收藏噢💨💨💨
搜素框展示
💫💫💫💫
💤💤💤💤(超级简约)
这款搜索框是来自：亚索老师的浏览器制作🤣🤣
搜索框的制作多种多样，各不相同，可以按照自己的想法任意发挥，那么就以我上面发的第一个图为例子，教一下这个搜索框是如何实现的🐱💻🐱💻
<!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/s?wd=' + oInp.value;
window.open(url);
}
</script>
</html>
效果：
搜索功能的实现方法🤎🤎🤎
主要是采用JavaScript来实现的，没有深入学习过JavaScript的小伙伴也没关系，代码很短的，而且很好理解
主要来看这一个函数
function Search() {
var url = 'https://www.baidu/s?wd=' + oInp.value;
window.open(url);
}
就以百度搜索为例子，后续可以有谷歌搜索啊、CSDN搜素等等
百度搜素网址：https://www.baidu/
参数解释：
s表示search，有些网站是写出了完整的search的
“wd=” 是英文的word的缩写，参数表示的是搜索关键词的内容，如果是汉字那么这个参数是汉字的十六进制形式，如果是英文，那么这个参数就用该英文来表示
ie指的是搜索方式
"s?wd"一般是一起出现哒💨如果想要了解更多参数，请点击：百度搜索参数
百度和谷歌以及很多不同网站，它们的搜索参数很多都是不一样的
比如CSDN搜索方式：以想要搜索“爬虫为例”
https://so.csdn/so/search?from=chrome_plugin&q=爬虫=&sourceid=chrome&ie=UTF-8
后续我会出各大常用网站的搜索网址辨析，在这里就不花太多篇幅了
好啦，今天的分享就到这里结束啦，如果你觉得这篇博客对你有帮助的话，别忘了点赞、关注和评论噢，下期再见💨
更多推荐
HTML部件之—如何实现搜索框(样式+功能实现)
发布评论