把石蒜模拟器搬进你自己的网页内

大佬开源Github项目地址:https://github.com/dsrkafuu/sakana-widget/

话不多说直接上效果图

sakana02

sakana03

上代码

head或者body标签内随便插入即可

<!--石蒜模拟器-->
<style>
  #sakana-widget {
    display: none;	#不显示
  }
  @media only screen and (min-width: 768px) {	#控制仅在PC端显示
    #sakana-widget {
      display: block;
      position: fixed;
      left: -25px;
      bottom: 0;
    }
  }
</style>

<div id="sakana-widget"></div>

<script>
  function initSakanaWidget() {
    new SakanaWidget().mount('#sakana-widget');
  }
</script>

<script
  async
  onload="initSakanaWidget()"
  src="https://cdn.jsdelivr.net/npm/sakana-widget@2.3.1/lib/sakana.min.js"
></script>

下面你的代码没有显示限制,PC端移动端都可显示

  <!--石蒜模拟器-->
  <div id="sakana-widget"></div> 
  <style>
  #sakana-widget {
    position: fixed;
    right: 0px;
    bottom: 50px;
  }
</style>
<script>
  function initSakanaWidget() {
    new SakanaWidget().mount('#sakana-widget');
  }
</script>
<script
  async
  onload="initSakanaWidget()"
  src="https://cdn.jsdelivr.net/npm/sakana-widget@2.3.1/lib/sakana.min.js"
></script>