mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
65 lines
2.6 KiB
TypeScript
65 lines
2.6 KiB
TypeScript
// author: https://github.com/z503722728
|
|
|
|
const CreateAnim = (): void => {
|
|
const biliMainHeader = document.getElementById('biliMainHeader')
|
|
if (biliMainHeader == null) {
|
|
return
|
|
}
|
|
const mstars1 = document.createElement('div')
|
|
mstars1.id = 'mstars1'
|
|
const mstars2 = document.createElement('div')
|
|
mstars2.id = 'mstars2'
|
|
biliMainHeader.appendChild(mstars1)
|
|
biliMainHeader.appendChild(mstars2)
|
|
|
|
// 添加一段css 样式到document最后
|
|
const style = document.createElement('style')
|
|
// generate random stars
|
|
function generate(numCtrl) {
|
|
let star = ''
|
|
const max = window.innerWidth * window.innerHeight
|
|
for (let i = 0; i < max / numCtrl; i++) {
|
|
const x = Math.floor(Math.random() * window.innerWidth * 1.5)
|
|
const y = Math.floor(Math.random() * (window.innerHeight + 2000))
|
|
star += `${x}px ${y}px #FFF,`
|
|
}
|
|
const x = Math.floor(Math.random() * window.innerWidth * 1.5)
|
|
const y = Math.floor(Math.random() * (window.innerHeight + 2000))
|
|
star += `${x}px ${y}px #FFF;`
|
|
return star
|
|
}
|
|
const starNumCtl = 400
|
|
const stars1Shadow = generate(starNumCtl)
|
|
const stars2Shadow = generate(starNumCtl * 2)
|
|
const stars3Shadow = generate(starNumCtl * 4)
|
|
const stars4Shadow = generate(starNumCtl * 8)
|
|
style.innerHTML = `
|
|
#mstars1{z-index: 1009;position: fixed;left:0px; width:1px;height:1px;background:transparent;box-shadow:${stars1Shadow};animation:animStar 50s linear infinite}
|
|
#mstars1:after{content:' ';position:fixed;left:0px;top:0px;width:1px;height:1px;background:transparent;box-shadow:${stars2Shadow}}
|
|
#mstars2{z-index: 1009;position: fixed;left:0px;width:2px;height:2px;background:transparent;box-shadow:${stars3Shadow};animation:animStar 100s linear infinite}
|
|
#mstars2:after{content:' ';position:fixed;left:0px;top:0px;width:2px;height:2px;background:transparent;box-shadow:${stars4Shadow}}
|
|
@keyframes animStar{from{transform:translateY(-200px)}to{transform:translateY(-2200px)}}
|
|
`
|
|
document.body.appendChild(style)
|
|
}
|
|
|
|
export const StarAnim = (on: boolean) => {
|
|
// 查找id mstars1 的div
|
|
let mstars1 = document.getElementById('mstars1')
|
|
let mstars2 = document.getElementById('mstars2')
|
|
// 如果没有找到id biliMainHeader 的div创建2个id为 mstars1 mstars2 的div
|
|
if (on) {
|
|
if (mstars1 == null) {
|
|
CreateAnim()
|
|
mstars1 = document.getElementById('mstars1')
|
|
mstars2 = document.getElementById('mstars2')
|
|
}
|
|
// 设置mstars1 mstars2 visible 为true
|
|
mstars1.style.visibility = 'visible'
|
|
mstars2.style.visibility = 'visible'
|
|
} else if (mstars1 != null) {
|
|
mstars1.style.visibility = 'hidden'
|
|
mstars2.style.visibility = 'hidden'
|
|
}
|
|
}
|