Heimdall 自定义美化

背景高斯模糊

效果如下

使用前

photo_1_2022-12-02_11-23-23

使用后

photo_2_2022-12-02_11-23-23

使用方法

// 打开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;
}`;

导航栏隐藏

效果如下

GIF 2022-12-2 11-19-46

使用方法

/** 打开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

效果如下

image

使用方法

// 打开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;
}

 

首页卡片鼠标悬浮效果

效果如下

GIF 2022-12-2 11-32-45

使用方法

/** 打开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
分享
二维码
打赏
海报
Heimdall 自定义美化
背景高斯模糊 效果如下 使用前 使用后 使用方法 // 打开settings - 自定义 JavaScript,写入下面代码 const backgroundImage = document.querySelector('……
<<上一篇
下一篇>>