Via浏览器主页 - YvYang's Blog

前言#

众所周知via浏览器是一款免费开源的非常好用的浏览器，其最大的特点就是体积小巧并且集成多种功能，安装完后仅仅3mb左右。极简的软件设计有着高度的自定义功能，这篇文章是作者的via浏览器主页的分享。

这个主页的代码由作者结合其他大佬的作品并利用AI更改而成，感谢前人铺路。

效果预览#

这个主页的搜索框出初始位置在下方，方便人手点击，聚焦后会上升至屏幕中央，同时Logo自动隐藏，无比丝滑。

Logo#

Logo的样式是HTML代码

1
<!DOCTYPE html>
2
<html lang="zh">
3
<head>
4
<meta charset="UTF-8">
5
<style>
6
    div p {
7
        text-align: center;
8
        background: linear-gradient(to right, #F596AA, #66CCFF 25%, #F596AA 50%, #66CCFF 75%, #F596AA);
9
        background-clip: text;
10
        -webkit-background-clip: text;
11
        color: transparent;
12
        background-size: 200% 100%;
13
        animation: runs 3s infinite linear;
14
        }
15

16
        @keyframes runs {
17
            0% {
18
                background-position: 0 0;
19
            }
20
            100% {
21
                background-position: 100% 0;
22
            }
23
        }
24
    </style>
25
</head>
26
<body>
27
    <div>
28
        <p>Ciallo～(∠・ω< )⌒★</p>
29
    </div>
30
<script>
31
   document.addEventListener("DOMContentLoaded", function () {
32
var h,
33
b = document.getElementById("search_submit"),
34
c = document.createElement("select"),
35
e = [],
36
f = search,
37
};
38
(c.style.color="#FFFFFF"),
39
(c.style.float = "left"),
40
(c.style.height = "46px"),
41
(c.style.border = "none"),
42
(c.style.paddingLeft = "10px"),
43
(c.style.background = "transparent"),
44
(c.style.outline = "none"),
45
(c.style.borderRadius = "inherit");
46
for (h in g)
47
e.push(
48
"<option value=" +
49
h +
50
" " +
51
(g[h].disabled || "") +
52
">" +
53
g[h].name +
54
"</option>"
55
);
56
(c.innerHTML = e.join("")),
57
(c.onchange = function () {
58
var b, c;
59
"c" !== this.value && "m" !== this.value
60
? ((b = !0), (localStorage.se = this.value))
61
: ((c = prompt(
62
"请修改自定义地址\n注：via上取消也可能会清空(′⊙ω⊙`)",
63
localStorage.c
64
)),
65
(c = (c || "").trim()),
66
(b = !c),
67
(this.value = b ? "i" : "c"),
68
(localStorage.c = c)),
69
(this.children[this.children.length - 1].disabled = b);
70
}),
71
(c.value = localStorage.se || "i"),
72
b.parentElement.insertBefore(c, b),
73
(search = function () {
74
var a = document.getElementById("search_input");
75
return (
76
(a.value = a.value.trim()),
77
a.value ? ((a.value = g[c.value].url + a.value), f()) : !1
78
);
79
});
80
});
81
</script>
82
</body>
83
</html>

自定义css#

1
/* ===== 根元素变量定义 ===== */
2
:root {
3
  --contenttop: 148vw;         /* 内容区域顶部定位基准值 */
4
  --searchbarmove: -68vw;      /* 搜索栏获得焦点时垂直移动距离 */
5
  --submitmove: 76vw;          /* 提交按钮水平定位位置 */
6
  --searchbaradius: 15px;      /* 搜索栏圆角半径 */
7
  --searchbarwidth: 90vw;      /* 获得焦点时搜索栏宽度 */
8
  --searchbarclear: 0.1;       /* 搜索栏背景透明度 */
9
  --searchbarblur: 5px;        /* 背景模糊效果强度 */
10
  --sugposition: 110vw;         /* 搜索建议框底部定位 */
11
}
12

13
/* ===== 主内容区域定位 ===== */
14
#content {
15
  position: fixed;
16
  top: var(--contenttop);      /* 使用变量控制顶部定位 */
17
  /* 添加过渡效果确保所有子元素同步移动 */
18
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
19
}
20

21
/* 搜索栏获得焦点时移动整个内容区域 */
22
.search_bar:focus-within ~ #content {
23
  transform: translateY(var(--searchbarmove));
24
}
25

26
/* ===== LOGO协同动画 ===== */
27
/* 确保Logo有正确的位置和过渡 */
28
#logo {
29
  position: relative; /* 或 absolute/fixed 根据实际情况 */
30
  display: block;
31
  transform: translateY(0);
32
  opacity: 1;
33
  /* 使用与搜索框相同的动画曲线和持续时间 */
34
  transition:
35
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
36
    opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
37
}
38

39
/* 搜索栏获得焦点时Logo的协同动画 */
40
.search_bar:focus-within ~ #logo {
41
  /* 与搜索框相同的移动距离 */
42
  transform: translateY(var(--searchbarmove));
43
  /* 在移动过程中逐渐隐藏 */
44
  opacity: 0;
45
}
46

47
/* ===== 搜索建议框样式 ===== */
48
.opSug_wpr {
49
  width: var(--searchbarwidth) !important;         /* 动态宽度 */
50
  border-radius: 15px !important;                  /* 圆角效果 */
51
  border: 0 !important;
52
  background: rgba(255, 255, 255, 0.2) !important; /* 半透明白色背景 */
53
  backdrop-filter: blur(5px);                      /* 毛玻璃效果 */
54
  max-height: 250px !important;
55
  bottom: var(--sugposition);                      /* 动态底部定位 */
56
  animation: enter-to 0.5s forwards;               /* 入场动画 */
57
  transform-origin: top center;                    /* 缩放中心点 */
58
}
59

60
/* 搜索建议框入场动画 */
61
@keyframes enter-to {
62
  from {
63
    transform: translateY(-40px) scale(0.98);  /* 初始位置：上移+轻微缩小 */
64
    opacity: 0;                                /* 初始透明度 */
65
  }
66
  to {
67
    transform: translateY(0) scale(1);         /* 结束位置：正常位置 */
68
    opacity: 1;                                /* 完全显示 */
69
  }
70
}
71

72
/* ===== 主搜索栏样式 ===== */
73
.search_bar {
74
  box-shadow: 0 0 5px rgba(70, 70, 40, 0.255); /* 柔和阴影 */
75
  width: 80vw;                                 /* 默认宽度 */
76
  background: rgba(255, 255, 255, var(--searchbarclear)); /* 动态透明度 */
77
  backdrop-filter: blur(5px);                   /* 背景模糊 */
78
  border-radius: var(--searchbaradius) !important; /* 动态圆角 */
79
  transform: translateY(0);                     /* 初始位置 */
80
  position: relative; /* 确保层级正确 */
81
  z-index: 10; /* 高于Logo */
82
  /* 分离过渡效果：位置变化使用弹性曲线，宽度变化使用缓动 */
83
  transition:
84
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
85
    width 0.5s ease;
86
}
87

88
/* 搜索栏获得焦点状态 */
89
.search_bar:focus-within {
90
  width: var(--searchbarwidth);               /* 扩展宽度 */
91
  transform: translateY(var(--searchbarmove)); /* 垂直移动 */
92
  /* 保持与默认状态一致的过渡曲线 */
93
  transition:
94
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
95
    width 0.3s ease;
96
}
97

98
/* ===== 提交按钮样式 ===== */
99
#search_submit {
100
  position: absolute !important;
101
  z-index: 1;
102
  display: block !important;
103
  left: 80vw;                     /* 初始位置：搜索栏右侧 */
104
  opacity: 0;
105
  visibility: hidden;
106
  /* 弹性过渡效果：带弹跳的动画曲线 */
107
  transition:
108
    left 0.9s cubic-bezier(0.68, -0.55, 0.27, 1.55),
109
    opacity 0.6s ease-out,
110
    visibility 0.6s step-end;
111
}
112

113
/* 搜索栏聚焦时的提交按钮 */
114
.search_bar:focus-within > #search_submit {
115
  left: var(--submitmove);        /* 移动到指定位置 */
116
  opacity: 1;
117
  visibility: visible;
118
  animation: submit-appear 1s both; /* 应用弹跳动画 */
119
  transition: none;               /* 禁用基础过渡 */
120
}
121

122
/* 提交按钮弹跳动画 */
123
@keyframes submit-appear {
124
  0% {
125
    opacity: 0;
126
    transform: translateX(20px);  /* 初始位置：右侧偏移 */
127
  }
128
  50% {
129
    opacity: 0.5;
130
    transform: translateX(-5px);  /* 中间位置：轻微回弹 */
131
  }
132
  100% {
133
    opacity: 1;
134
    transform: translateX(0);     /* 最终位置：正常位置 */
135
  }
136
}
137

138
/* ===== 书签区域动画 ===== */
139
a, #bookmark_part {
140
  transform: translateY(0);
141
  opacity: 1;
142
  visibility: visible;
143
  /* 精确控制各属性的过渡效果 */
144
  transition:
145
    transform 0.4s,
146
    opacity 0.4s,
147
    visibility 0.4s;
148
}
149

150
/* ===== 其他保持不变的样式 ===== */
151
/* 搜索栏聚焦时书签区域的隐藏效果 */
152
.search_part:focus-within ~ #bookmark_part {
153
  opacity: 0;
154
  visibility: hidden;
155
  transform: translateY(20px);
156
}
157

158
/* 搜索栏聚焦时链接的隐藏效果 */
159
.search_part:focus-within > a {
160
  opacity: 0;
161
  visibility: hidden;
162
  transform: translateY(20px);
163
}
164

165
/* 其他保留样式 */
166
.opSug_wpr {
167
  /* 原有样式 */
168
}
169
#search_submit {
170
  /* 原有样式 */
171
}

由于作者使用的是华为手机的小艺输入法输入框的位置会比默认的百度输入法低一点，请自行调整其中参数，注释已经非常详尽

背景壁纸#

可自行下载（选择）图片后设置

注: 图片来源于网络

音乐

音乐

前言#

效果预览#

Logo#

自定义css#

背景壁纸#

支持与分享

评论区

音乐

文章目录