个人via浏览器主页配置（留档）

薛定谔的青蛙

已于 2024-07-06 19:10:19 修改

阅读量8.6k

点赞数 9

文章标签： html css

于 2023-06-28 08:11:47 首次发布

本文链接：https://blog.csdn.net/weixin_51982763/article/details/131428901

版权

换了新手机后书签都没了，就没什么顾虑了，直接卸载某夸克浏览器换上了via，然后就沉默玩弄via无法自拔了。在酷安上看了许多大佬的配置，缝合了一个自己的主页设置。

推子第二季出来了...我想起来了，一切都想起来了，我一直是露比党啊！！！！

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;"> Hoshino Rubii</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={
i:{name:"默认",url:""},
bd:{name:"百度",url:"https://www.baidu.com/s?word="},
gg:{name:"谷歌",url:"https://www.google.com/search?query="},
bing:{name:"必应",url:"https://cn.bing.com/search?q="},
fs:{name:"F 搜",url:"https://fsoufsou.com/search?q="},
gk:{name:"夸克",url:"https://quark.sm.cn/s?q="},
wz:{name:"无追",url:"https://www.wuzhuiso.com/s?q="},
sg:{name:"搜狗",url:"https://m.sogou.com/web/searchList.jsp?keyword="},
hs:{name:"360",url:"https://m.so.com/s?q="},
tt:{name:"头条",url:"https://so.toutiao.com/search?keyword="},
};(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="【推しの子】星野 ルビー";window.document.title=msg </script>

</script>
</body>
</html>

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;
}