给博客右下角添加一个弹簧人物角色

释放双眼,带上耳机,听听看~!

给博客右下角添加一个弹簧人物角色

由于时不时会有人问本博客右下角人物如何添加,这里还是稍微介绍一下。其实这是一个开源的项目,开源项目地址:sakana


使用起来也非常简单,如果使用的是 wordpress,那么找到主题编辑器,在 footer.php 添加如下代码即可:

<div class="sakana-box"></div>

<script src="https://cdn.jsdelivr.net/npm/sakana"></script>
<script>
// 启动
const sakana = Sakana.init({
el: '.sakana-box', // 启动元素 node 或 选择器
scale: .5, // 缩放倍数
canSwitchCharacter: true, // 允许换角色
inertia: 0.01, // 惯性
decay: 0.97, // 衰减
r: -20, // 启动角度
y: 10, // 启动高度
scale: 0.5, // 缩放倍数
translateY: 0, // 位移高度
});
</script>

<style>
html .sakana-box{
z-index: 80;
position: fixed;
right: 0;
bottom: 0;
transform-origin: 100% 100%; /* 从右下开始变换 */
}
</style>

以上是本博客使用到的参数,由于弹簧弹跳太快限制了一下,不然晃眼睛。此外需要注意的是,如果弹簧人物角色加载缓慢,可以将 js 文件下载到本地。

嘘,点击底座还可以切换人物哦!!

文章链接:https://wuzuhua.cn/1813.html
文章标题:给博客右下角添加一个弹簧人物角色
文章版权:空木白博客 (https://wuzuhua.cn) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!
本文最后更新发布于2024年09月22日 20时25分01秒,某些文章具有时效性,若有错误或已失效,请在下方留言或联系空木白:18177233@qq.com

给TA打赏
共{{data.count}}人
人已打赏
网站源码

即刻到账-支付宝到账音效生成器HTML源码

2024-9-10 10:22:35

综合资讯

宝塔面板优化一键脚本、非开心版

2023-11-11 15:29:04

0 条回复 A文章作者 M管理员
每日一言:我躺在床上看天花板,想着我工作的天花板,只是别人的地板。
    暂无讨论,说说你的看法吧
日夜切换
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
我是底线可爱胖!冲鸭~