- 预览:博客右下方的立绘
- 可以和鼠标交互调整立绘弹跳的方向和力度,点击底座可以切换人物
- 使用方式:找个合适的地方加入下面的代码,比如我是插入到 footer.php的 <footer> 标签里面
<!-- 石蒜模拟器 https://github.com/itorr/sakana -->
<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>
<style>
html{
background: #CCC;
}
html .sakana-box{
position: fixed;
right: 0;
bottom: 0;
transform-origin: 100% 100%; /* 从右下开始变换 */
}
</style>
- 最后,如果是sakura之类的首页有封面大图的朋友可以添加 sakana-box的z-index: 999; 不然这个div盒子会被封面大图压住导致在首页封面大图的时候无法交互
Comments | NOTHING