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

大佬开源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>