「Sakana!」石蒜模拟器

发布于 2022-11-16  537 次阅读


  • 预览:博客右下方的立绘
  • 可以和鼠标交互调整立绘弹跳的方向和力度,点击底座可以切换人物
  • 使用方式:找个合适的地方加入下面的代码,比如我是插入到 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盒子会被封面大图压住导致在首页封面大图的时候无法交互

我已经躺好啦~