最近在B站看到了有UP主做的介绍视频
本石蒜厨怎能放过如此可爱的东西
所以在这里写一个原帖地址以及我是如何添加的
(毕竟Handsome的教程好像还没有嘛)
当然,如果能帮到人最好啦
首先,这个是原帖地址
https://github.com/itorr/sakana
因为其使用的是MIT开源嘛
所以我就搬过来用了
首先,在该介绍页面我们能够找到两段代码
<div class="sakana-box"></div>
<script src="https://cdn.jsdelivr.net/npm/sakana"></script>
<script>
Sakana.init({
el: '.sakana-box', // 启动元素 node 或 选择器
scale: .5, // 缩放倍数
canSwitchCharacter: true, // 允许换角色
});
</script>
html .sakana-box{
position: fixed;
right: 0;
bottom: 0;
transform-origin: 100% 100%; /* 从右下开始变换 */
}
如果你和本博客使用的同样是基于Typecho的handsome主题的话
你可以在主题的设置外观中找到 “开发者设置“
我们需要打开开发者设置,然后将
html .sakana-box{
position: fixed;
right: 0;
bottom: 0;
transform-origin: 100% 100%; /* 从右下开始变换 */
}
这段代码添加到其自定义CSS中
然后将这段代码
<div class="sakana-box"></div>
<script src="https://cdn.jsdelivr.net/npm/sakana"></script>
<script>
Sakana.init({
el: '.sakana-box', // 启动元素 node 或 选择器
scale: .5, // 缩放倍数
canSwitchCharacter: true, // 允许换角色
});
</script>
添加到自定义输出body 尾部的HTML代码中
然后点一下保存,在主页刷新一下你的页面就ok啦
并且这个还提供很多参数可以自行修改的,比如惯性和衰减之类的
详细的参数你可以去大佬原帖看看啦
(地址就是最上面的那个)
文章的最后
♪sa→ka→na——(>○<)♪