VIA浏览器Logo html及CSS分享

csx

VIA浏览器目前是我的主力浏览器。
说一说特点:
1.小巧精致只有2.6兆，没有广告。
2.有广告拦截和脚本功能。
3.可以自定义主页。

这里介绍下VIA浏览器的Logo html功能，
就是把html代码效果作为logo。
这里你可以添加天气、时钟、图片、或者动态图片等等作为logo。
我弄了个日期星期时间logo

如图

                               
登录/注册后可看大图

HTML代码部分
右下角三条杠--> 设置 --> 定制 --> Logo -->点一下Logo那里  --> 选"HTML 代码" --> 粘贴上楼下的代码 --> 右上“保存” 即可！！

[HTML] 纯文本查看 复制代码

<!--年/月/日 时:分:秒(挂件)-->
<div <span style="font-size: 25px; font-weight: bold;" id='times'><script>
(function(){function f(i){return i<10?'0'+i:i;}function s(){const D=new Date();
week=f(D.getDay());
week = "日一二三四五六".charAt(week);
week="周"+week;
document.getElementById('times').innerHTML=f(D.getFullYear())+'/'+f(D.getMonth()+1)+'/'+f(D.getDate())+'&#8194;'+week+' '+f(D.getHours())+':'+f(D.getMinutes())+':'+f(D.getSeconds());}
s();setInterval(function(){s();},1000);})();
</script></div>

本来还想设置个天气的，没有好看的。之前有个和风天气。终止服务了。
然后介绍下CSS可以设置主页的一些内容

CSS代码部分
右下角三条杠--> 设置 --> 定制 --> 高级 -->点一下自定义CSS那里--> 粘贴上楼下的代码 --> 右上“保存” 即可！！

[HTML] 纯文本查看 复制代码

/* 主页背景图 */
body {
background: url("https://api.dujin.org/bing/m.php")center/cover no-repeat;
position: relative;
}
body::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5); /* 这里的数字表示遮罩的透明度，可以根据需要调整 */
}
 
/* 展示内容整体 */
#content {
position: fixed;
/* top可以调节显示内容距离手机顶部的距离 */
top: 260px;
}
 
/* 主页图标自适应 */
#box_container {
width: 93%;/*图标容器宽度占父容器宽度的百分比*/
display: grid;/*居中关键配置，表格布局*/
justify-items: center;/*居中关键配置，每个图标居中*/
row-gap: 8px;/*图标行距*/
grid-template-columns: repeat(6,auto);/*居中关键配置，意思是6列，每列宽度自动平均分，要其他列数把6改了就行，列数多了对应的图标大小要调小一些才不会超出当行容器大小，图标过大了导致宽度过大自然无法居中*/
}
.box{
margin:6px calc((100%/var(--Boxnum))*(1/20));width:calc((100%/var(--Boxnum))*(18/20)) !important;
animation:hi2 var(--BoxOpen);
height:60px !important;border:0;
overflow:hidden;}
@keyframes hi2 {0% {opacity:0;
transform:translateY(60px);}}
}