Heimdall 自定义美化
背景高斯模糊
效果如下
使用前
使用后
使用方法
// 打开settings - 自定义 JavaScript,写入下面代码 const backgroundImage = document.querySelector('#app').style.backgroundImage; document.querySelector('#app').style.backgroundImage = ''; const contant = document.querySelector('#app .content'); contant.style.overflow = 'auto'; contant.style.height = '100vh'; document.body.style.overflow = 'hidden' console.log(backgroundImage); const styleElem = document.head.appendChild(document.createElement("style")); styleElem.innerHTML = `#app::before { background-image: ${backgroundImage};filter: blur(2.5px); background-position: center; background-repeat: no-repeat; background-size: cover; content: ""; position: absolute; min-height: 100vh; width: 100%; transform: scale(1.02); z-index: 0; }`;
导航栏隐藏
效果如下
使用方法
/** 打开settings - 自定义 CSS,写入下面代码 **/
#config-buttons {
bottom: 0;
display: flex;
flex-direction: column;
position: fixed;
right: 0;
transform: translateY(calc(100% - 27px));
transition: transform 0.5s;
}
#config-buttons:hover {
transform: translateY(0);
}
#config-buttons::before:hover + #config-buttons {
transform: translateY(0);
}
#config-buttons::before {
content: "^";
top: -38px;
background: rgba(0,0,0,.8);
height: 26px;
width: 50px;
text-align: center;
font-size: 19px;
font-weight: 700;
line-height: 32px;
cursor: pointer;
color: #ffffff;
}
自定义网页title、icon
效果如下
使用方法
// 打开settings - 自定义 JavaScript,写入下面代码
$('title').text('home');
// 你自己的图标
const icon = 'https://cn.gravatar.com/avatar/3873858713e2e5d5d3ab136312737885?s=256&d=mm';
$('link[rel="mask-icon"]')[0].href = icon;
$('link[rel="icon"]').each(function() {
$(this)[0].href = icon;
})
$('link[rel="apple-touch-icon"]').each(function() {
$(this)[0].href = icon;
})})})
首页卡片鼠标悬浮效果
效果如下
/** 打开settings - 自定义 CSS,写入下面代码 **/
.item:hover {
transform: scale(1.05);
z-index: 9;
will-change: opacity;
}
首页卡片鼠标悬浮效果
效果如下
使用方法
/** 打开settings - 自定义 CSS,写入下面代码 **/
.item:hover {
transform: scale(1.05);
z-index: 9;
will-change: opacity;
}
自动获取必应每日壁纸
随机必应精选壁纸,代码如下加入js即可
const backgroundImage = 'url("https://api.vvhan.com/api/bing?rand=sj")';
$("#app")[0].style.backgroundImage = backgroundImage;
版权声明:
作者:隔壁小色
链接:https://www.fanooo.com/archives/247
文章版权归作者所有,未经允许请勿转载。
THE END