通过在head中注入代码 自定义halo网页
1.添加鼠标点击特效
在github上找到一个挺好玩的鼠标点击特效
github链接：https://github.com/AaaXya/firework
进github查看项目
进style.css将css配置复制出来放到<style></style>中
* {
margin: 0;
padding: 0;
}
body {
background: #c27ecf;
}
.aixin {
position: absolute;
transform: translate(0px, 0px) scale(1);
transition: all 0.7s ease-out;
}
.aixin::before,
.aixin::after {
content: '';
position: absolute;
left: 10px;
height: 16px;
width: 10px;
background-color: inherit;
border-radius: 5px 5px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.aixin::after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}将script中的内容放到<script></script>中
class CreatePattern {
constructor(el, x, y, config = {}) {
this.root = el
this.x = x
this.y = y
this.options = {
type: 'aixin',
quantity: 10,
distanceMax: 100,
distanceMin: 20,
palette: ['f9f383', 'eb125f', '6eff8a', '66ffff'],
...config,
}
this.growUp()
}
giveBirthToAChild() {
const initialStyles = document.createElement('i')
const randomColor =
this.options.palette[Math.floor(Math.random() * this.options.palette.length)]
//必须写成个函数每次调用一次保证得到不同的值
const randomTranslateValue = () =>
(Math.random() < 0.5 ? -1 : 1) *
(this.options.distanceMin +
Math.random() * (this.options.distanceMax - this.options.distanceMin))
this.root.append(initialStyles)
initialStyles.classList.add(this.options.type)
setTimeout(() => {
initialStyles.style.cssText = `background-color:#${randomColor};
left:${this.x}px;top:${this.y}px;
z-index:999;
transform: translate(${randomTranslateValue()}px,${randomTranslateValue()}px) scale(0)`
}, 0)
setTimeout(() => {
initialStyles.remove()
}, 700)
}
growUp() {
for (let i = 0; i < this.options.quantity; i++) this.giveBirthToAChild()
}
}
const el = document.createElement('div')
addEventListener('load', () => {
document.body.append(el)
document.addEventListener('click', function (e) {
new CreatePattern(el, e.pageX, e.pageY)
})
})然后在halo的注入代码菜单中，将代码写成html格式 注入到head中
最终的代码如下
//添加一个css
<style>
svg use {
fill: blue;
}
/* 添加一些样式以制作特效 */
* {
margin: 0;
padding: 0;
}
body {
background: #c27ecf;
}
.aixin {
position: absolute;
transform: translate(0px, 0px) scale(1);
transition: all 0.7s ease-out;
}
.aixin::before,
.aixin::after {
content: '';
position: absolute;
left: 10px;
height: 16px;
width: 10px;
background-color: inherit;
border-radius: 5px 5px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.aixin::after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
</style>
// 新增一个js，将刚才复制的内容放进来
<script>
class CreatePattern {
constructor(el, x, y, config = {}) {
this.root = el
this.x = x
this.y = y
this.options = {
type: 'aixin',
quantity: 10,
distanceMax: 100,
distanceMin: 20,
palette: ['f9f383', 'eb125f', '6eff8a', '66ffff'],
...config,
}
this.growUp()
}
giveBirthToAChild() {
const initialStyles = document.createElement('i')
const randomColor =
this.options.palette[Math.floor(Math.random() * this.options.palette.length)]
//必须写成个函数每次调用一次保证得到不同的值
const randomTranslateValue = () =>
(Math.random() < 0.5 ? -1 : 1) *
(this.options.distanceMin +
Math.random() * (this.options.distanceMax - this.options.distanceMin))
this.root.append(initialStyles)
initialStyles.classList.add(this.options.type)
setTimeout(() => {
initialStyles.style.cssText = `background-color:#${randomColor};
left:${this.x}px;top:${this.y}px;
z-index:999;
transform: translate(${randomTranslateValue()}px,${randomTranslateValue()}px) scale(0)`
}, 0)
setTimeout(() => {
initialStyles.remove()
}, 700)
}
growUp() {
for (let i = 0; i < this.options.quantity; i++) this.giveBirthToAChild()
}
}
const el = document.createElement('div')
addEventListener('load', () => {
document.body.append(el)
document.addEventListener('click', function (e) {
new CreatePattern(el, e.pageX, e.pageY)
})
})
//以下部分是为了删除Aurora主题左下角的机器人
//所有资源加载完成后执行
window.addEventListener("load", function() {
$("#bot-container").remove();
//$("#Aurora-Dia--tips").html("halo");
//为增加新的页签做准备
console.log($(".menus").find('.list-none').find('li:eq(0)').html());
});
// document.title = "test";
</script>
window.addEventListener来绑定一个事件监听器，当页面加载完成时触发
halo是有引用
jQuery库的，可以使用jQuery的选择器$("#bot-container")来选择页面中id为"bot-container"（也就是机器人的id）的元素
然后使用remove()方法来移除
在常规情况下，
<script>标签中的脚本会在网页加载过程中自动执行。当浏览器解析到<script>标签时，会立即执行其中的JavaScript代码。然而，有一些情况下可以手动触发脚本的执行。例如，使用事件触发器（如按下按钮或链接点击）来调用
JavaScript函数，或者在特定条件下执行某些操作。此外，还可以使用
JavaScript内置的定时器函数（如setTimeout()和setInterval()）来延迟执行或周期性地执行脚本。
评论区