admin 管理员组文章数量: 887007
〇、样式预览
一、打开via浏览器主页定制
打开via浏览器>>设置>>定制
二、填写HTML代码[1]
选择Logo>>Logo默认>>HTML代码>>填入下列代码>>保存
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!--搜索栏标题金色到粉色渐变-->
<div style="font-size: 40px; font-weight: bold;"> <p style="display: inline; background: linear-gradient(to right, gold, deepPink); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; font-style: normal;">Google</p > </div>
<script type="text/javascript">
var s = false;
var t =document.getElementsByTagName("title")[0];
if(s){
t.innerHTML = str[0]+str[1];
}else{
t.innerHTML = str[0];
}
</script>
<!--搜索栏一句-->
<script>setTimeout("document.getElementById('search_input').setAttribute('placeholder', '开始探索世界吧！')", 100);
</script>
<!搜索栏一言金色到粉色渐变>
<style> #search_input::placeholder { background: linear-gradient(to right, gold, deepPink); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style>
<!--快捷切换搜索引擎-->
<script>document.addEventListener("DOMContentLoaded", function () {var h,b =document.getElementById("search_submit"),c=document.createElement("select"),
e=[],f=search,g={
bd:{name:"百度",url:"https://www.baidu/s?word="},
gg:{name:"谷歌",url:"https://www.google/search?query="},
bing:{name:"必应",url:"https://cn.bing/search?q="},
sg:{name:"搜狗",url:"https://m.sogou/web/searchList.jsp?keyword="},
hs:{name:"360",url:"https://m.so/s?q="},
bl:{name:"哔哩",url:"https://m.bilibili/search?keyword="},
tk:{name:"抖音",url:"https://www.douyin/search/"},
tt:{name:"头条",url:"https://so.toutiao/search?keyword="},
mt:{name:"秘塔",url:"https://metaso/search/8507787498995261440?q="},
sm:{name:"神马",url:"https://yz.m.sm/s?q="},
dg:{name:"Duck",url:"https://duckduckgo/?q=&ia=web"},
qk:{name:"夸克",url:"https://quark.sm/s?q="},
};(c.style.color=getComputedStyle(document.getElementById("search_input")).color),
(c.style.float = "left"),
(c.style.appearance = "none"),
(c.style.background = "rgba(200, 200, 200,0.3)"),
(c.style.height = "32px"),
(c.style.border = "none"),
(c.style.padding = "0 7px 0 6px"),
(c.style.margin = "7px 0 0 7px"),
(c.style.fontSize="16px"),
(c.style.outline = "none"),
(c.style.borderRadius = "inherit");
for (h in g) e.push("<option value=" + h +" " + (g[h].disabled || "") + ">" + g[h].name + "</option>"); (c.innerHTML = e.join("")),(c.onchange = function () {var b, c;((b = !0), (localStorage.se = this.value))}),(c.value = localStorage.se || "i"),b.parentElement.insertBefore(c, b),(search = function () {var a =document.getElementById("search_input");(a.value = a.value.trim()), a.value ? ((a.value = g[c.value].url + a.value), f()) : !1});});</script>
<!--上搜索栏一言-->
<script>var msg="YuSearch for Google";window.document.title=msg </script>
</script>
</body>
</html>
三、填写CSS代码
选择高级>>自定义CSS>>填入下列代码>>保存
:root{
--contenttop:100vw;/*显示内容与手机顶部的距离*/
--searchbarmove:-40vw;/*输入框向下移动的距离*/
--submitmove:76vw;/*搜索按钮出现位置*/
--searchbaradius:15px;/*搜索框圆角大小*/
}
body {
background-position:top center;
background-size: 100% auto;
}
/* 展示内容整体 */
#content {
position: fixed;
/* top可以调节显示内容距离手机顶部的距离 */
top: 自适应px;
}
/* 搜索框 */
.search_bar {
/* 阴影效果 */
box-shadow: 0 0 5px rgba(70,70,40,0.255);
/* 模糊效果 */
backdrop-filter: blur(5px);
/* 背景色 */
background-color: rgba(255,255,255,.100);
/* 圆角 */
border-radius: 10px;
display: table;
/* 宽度 */
width: 80%;
/* 高度 */
height: 30px;
max-width: 400px;
margin: 10px auto;
text-align:center;
font-size:30px;
border:1;
outline:none;
font-weight:560;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
animation:search-bar 1s;
}
/* 搜索框的动画 */
@keyframes search-bar {
0% {max-width: 100px;}
100% {max-width: 400px;}
}
#content {
position: fixed;
top: var(--contenttop);
}
.opSug_wpr {
border-radius:15px 15px 15px 15px !important;
border:0 none #FFFFFF !important;
border-top:5px solid transparent !important;
background: rgba(255,255,255,0.2) !important;
backdrop-filter: blur(25px);
transform: translateY(-120px);
width:90% !important;
min-height:190px !important;
height:210px !important;
}/* 兼容5.0以上版本 */
.search_bar:focus-within {
transform: translateY(var(--searchbarmove)) !important;
width:90%;
transition: all .4s;
}
.search_bar {
width:80%;
border-radius:var(--searchbaradius) !important;
transform: translateY(0) !important;
transition: all .4s;
}
.search_part:focus-within~#bookmark_part{
transform: translateY(var(--searchbarmove)) !important;
opacity:0;
visibility:hidden;
transition: all .4s;
}
.search_part:focus-within > a{
opacity:0;
visibility:hidden;
transition: all .4s;
}
a,#bookmark_part {
transform: translateY(0);
opacity:1;
visibility:visible;
transition: all .4s;
}
#search_submit{
position:absolute !important;
display:block !important;
left:85vw;
opacity:0;
visibility:hidden;
}
.search_bar:focus-within > #search_submit{
left:var(--submitmove);
opacity:1;
visibility:visible;
transition: all .4s ease-out;
}
/* 用于设置搜索时的词条联想框 */
.bdSug_wpr {
border-radius:15px 15px 15px 15px;
border:0 none #FFFFFF !important;
border-top:10px solid transparent !important;
background: rgba(255,255,255,0.2) !important;
backdrop-filter: blur(5px);
transform: translate(-16.5%,5%);
width:85% !important;
}
四、声明
（一）作者
- CSDN@智科不编程
（二）参考文献
- [1] CSDN@薛定谔的青蛙,个人via浏览器主页配置（留档）,2024·08·03
版权声明：本文标题：via浏览器自定义主页 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1729173101h1326921.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论