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

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

 HTML配置

 
 Hoshino Rubii
 

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

最终效果 

 

reference 

[1] 我推的孩子 官方壁纸 & 图集 - 哔哩哔哩

[2] 来自 wallv - 酷安

[3] 来自 桀奥不逊 - 酷安

[4] HTML颜色表及html代码（前端必备） – 源码巴士