Via浏览器主页
这篇文章是关于一个名为via浏览器主页的分享。它主要介绍了这个主页的设计和功能，包括简洁的界面、自定义CSS样式以及一些特定的交互效果。例如，搜索框的输入位置在初始状态下位于屏幕下方，当用户聚焦时会上升到屏幕中央，同时Logo会自动隐藏。此外，文章还包含了一些关于如何修改自定义地址的提示。
前言
众所周知via浏览器是一款免费开源的非常好用的浏览器，其最大的特点就是体积小巧并且集成多种功能，安装完后仅仅3mb左右。
极简的软件设计有着高度的自定义功能，这篇文章是作者的via浏览器主页的分享。
这个主页的代码由作者结合其他大佬的作品并利用AI更改而成，感谢前人铺路。
效果预览
这个主页的搜索框出初始位置在下方，方便人手点击，聚焦后会上升至屏幕中央，同时Logo自动隐藏，无比丝滑。
Logo
Logo的样式是HTML代码
Text
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
div p {
text-align: center;
background: linear-gradient(to right, #F596AA, #66CCFF 25%, #F596AA 50%, #66CCFF 75%, #F596AA);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-size: 200% 100%;
animation: runs 3s infinite linear;
}
@keyframes runs {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
</style>
</head>
<body>
<div>
<p>Ciallo～(∠・ω< )⌒★</p>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var h,
b = document.getElementById("search_submit"),
c = document.createElement("select"),
e = [],
f = search,
};
(c.style.color="#FFFFFF"),
(c.style.float = "left"),
(c.style.height = "46px"),
(c.style.border = "none"),
(c.style.paddingLeft = "10px"),
(c.style.background = "transparent"),
(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;
"c" !== this.value && "m" !== this.value
? ((b = !0), (localStorage.se = this.value))
: ((c = prompt(
"请修改自定义地址\n注：via上取消也可能会清空(′⊙ω⊙`)",
localStorage.c
)),
(c = (c || "").trim()),
(b = !c),
(this.value = b ? "i" : "c"),
(localStorage.c = c)),
(this.children[this.children.length - 1].disabled = b);
}),
(c.value = localStorage.se || "i"),
b.parentElement.insertBefore(c, b),
(search = function () {
var a = document.getElementById("search_input");
return (
(a.value = a.value.trim()),
a.value ? ((a.value = g[c.value].url + a.value), f()) : !1
);
});
});
</script>
</body>
</html>自定义css
CSS
/* ===== 根元素变量定义 ===== */
:root {
--contenttop: 148vw; /* 内容区域顶部定位基准值 */
--searchbarmove: -68vw; /* 搜索栏获得焦点时垂直移动距离 */
--submitmove: 76vw; /* 提交按钮水平定位位置 */
--searchbaradius: 15px; /* 搜索栏圆角半径 */
--searchbarwidth: 90vw; /* 获得焦点时搜索栏宽度 */
--searchbarclear: 0.1; /* 搜索栏背景透明度 */
--searchbarblur: 5px; /* 背景模糊效果强度 */
--sugposition: 110vw; /* 搜索建议框底部定位 */
}
/* ===== 主内容区域定位 ===== */
#content {
position: fixed;
top: var(--contenttop); /* 使用变量控制顶部定位 */
/* 添加过渡效果确保所有子元素同步移动 */
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 搜索栏获得焦点时移动整个内容区域 */
.search_bar:focus-within ~ #content {
transform: translateY(var(--searchbarmove));
}
/* ===== LOGO协同动画 ===== */
/* 确保Logo有正确的位置和过渡 */
#logo {
position: relative; /* 或 absolute/fixed 根据实际情况 */
display: block;
transform: translateY(0);
opacity: 1;
/* 使用与搜索框相同的动画曲线和持续时间 */
transition:
transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* 搜索栏获得焦点时Logo的协同动画 */
.search_bar:focus-within ~ #logo {
/* 与搜索框相同的移动距离 */
transform: translateY(var(--searchbarmove));
/* 在移动过程中逐渐隐藏 */
opacity: 0;
}
/* ===== 搜索建议框样式 ===== */
.opSug_wpr {
width: var(--searchbarwidth) !important; /* 动态宽度 */
border-radius: 15px !important; /* 圆角效果 */
border: 0 !important;
background: rgba(255, 255, 255, 0.2) !important; /* 半透明白色背景 */
backdrop-filter: blur(5px); /* 毛玻璃效果 */
max-height: 250px !important;
bottom: var(--sugposition); /* 动态底部定位 */
animation: enter-to 0.5s forwards; /* 入场动画 */
transform-origin: top center; /* 缩放中心点 */
}
/* 搜索建议框入场动画 */
@keyframes enter-to {
from {
transform: translateY(-40px) scale(0.98); /* 初始位置：上移+轻微缩小 */
opacity: 0; /* 初始透明度 */
}
to {
transform: translateY(0) scale(1); /* 结束位置：正常位置 */
opacity: 1; /* 完全显示 */
}
}
/* ===== 主搜索栏样式 ===== */
.search_bar {
box-shadow: 0 0 5px rgba(70, 70, 40, 0.255); /* 柔和阴影 */
width: 80vw; /* 默认宽度 */
background: rgba(255, 255, 255, var(--searchbarclear)); /* 动态透明度 */
backdrop-filter: blur(5px); /* 背景模糊 */
border-radius: var(--searchbaradius) !important; /* 动态圆角 */
transform: translateY(0); /* 初始位置 */
position: relative; /* 确保层级正确 */
z-index: 10; /* 高于Logo */
/* 分离过渡效果：位置变化使用弹性曲线，宽度变化使用缓动 */
transition:
transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
width 0.5s ease;
}
/* 搜索栏获得焦点状态 */
.search_bar:focus-within {
width: var(--searchbarwidth); /* 扩展宽度 */
transform: translateY(var(--searchbarmove)); /* 垂直移动 */
/* 保持与默认状态一致的过渡曲线 */
transition:
transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
width 0.3s ease;
}
/* ===== 提交按钮样式 ===== */
#search_submit {
position: absolute !important;
z-index: 1;
display: block !important;
left: 80vw; /* 初始位置：搜索栏右侧 */
opacity: 0;
visibility: hidden;
/* 弹性过渡效果：带弹跳的动画曲线 */
transition:
left 0.9s cubic-bezier(0.68, -0.55, 0.27, 1.55),
opacity 0.6s ease-out,
visibility 0.6s step-end;
}
/* 搜索栏聚焦时的提交按钮 */
.search_bar:focus-within > #search_submit {
left: var(--submitmove); /* 移动到指定位置 */
opacity: 1;
visibility: visible;
animation: submit-appear 1s both; /* 应用弹跳动画 */
transition: none; /* 禁用基础过渡 */
}
/* 提交按钮弹跳动画 */
@keyframes submit-appear {
0% {
opacity: 0;
transform: translateX(20px); /* 初始位置：右侧偏移 */
}
50% {
opacity: 0.5;
transform: translateX(-5px); /* 中间位置：轻微回弹 */
}
100% {
opacity: 1;
transform: translateX(0); /* 最终位置：正常位置 */
}
}
/* ===== 书签区域动画 ===== */
a, #bookmark_part {
transform: translateY(0);
opacity: 1;
visibility: visible;
/* 精确控制各属性的过渡效果 */
transition:
transform 0.4s,
opacity 0.4s,
visibility 0.4s;
}
/* ===== 其他保持不变的样式 ===== */
/* 搜索栏聚焦时书签区域的隐藏效果 */
.search_part:focus-within ~ #bookmark_part {
opacity: 0;
visibility: hidden;
transform: translateY(20px);
}
/* 搜索栏聚焦时链接的隐藏效果 */
.search_part:focus-within > a {
opacity: 0;
visibility: hidden;
transform: translateY(20px);
}
/* 其他保留样式 */
.opSug_wpr {
/* 原有样式 */
}
#search_submit {
/* 原有样式 */
}由于作者使用的是华为手机的小艺输入法输入框的位置会比默认的百度输入法低一点，请自行调整其中参数，注释已经非常详尽
背景壁纸
可自行 下载（选择） 图片后设置
注: 图片来源于网络
