记录一下博客文章内添加的有趣彩蛋

(已编辑)

409

AI·GEN

关键洞察

Important
望周知的周知：本文章内所罗列的彩蛋组件示例代码仅由博主在本博客内对代码进行了兼容性适配，可能因设备或分辨率原因在某些情况下工作不正常，若您感兴趣可以自行对代码进行适配。

前言

在写某些不太正经的文章的时候，我希望能够给文章添加一些小小的互动彩蛋，增强读者的趣味性。因此本人将在网上冲浪或者与博友互访时看到的有趣彩蛋都一一添加进来，并在此做一个总结归纳，以免下次使用素材时难以搜寻。

一、🐟「Sakana!」石蒜模拟器

功能

组合参数例

代码开源于

该彩蛋在本博客中位于自述页面，注：浏览器分辨率低于1024px时不可见

https://www.xiaohanwu.com/me

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/sakana-widget@2.7.0/lib/sakana.min.css"
/>
<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.7.0/lib/sakana.min.js"
></script>

二、旋转小人

来源于博友@刘郎阁的分享，原帖链接：

https://yjvc.cn/index.php/archives/940/

该彩蛋在博客中位于此页面：

<div class="twopeople">
    <div class="container" style="height:200px;">
        <canvas class="illo" width="800" height="800" style="max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;"></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/twopeople1.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/zdog.dist.js"></script>
    <script id="rendered-js" src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/twopeople.js"></script>
    <style>
        .twopeople{
            margin: 0;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        canvas {
            display: block;
            margin: 0 auto;
            cursor: move;
        }
    </style>
</div>

Important
望周知的周知：本文章内所罗列的彩蛋组件示例代码仅由博主在本博客内对代码进行了兼容性适配，可能因设备或分辨率原因在某些情况下工作不正常，若您感兴趣可以自行对代码进行适配。

前言

一、🐟「Sakana!」石蒜模拟器

功能

组合参数例

代码开源于

该彩蛋在本博客中位于自述页面，注：浏览器分辨率低于1024px时不可见

https://www.xiaohanwu.com/me

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/sakana-widget@2.7.0/lib/sakana.min.css"
/>
<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.7.0/lib/sakana.min.js"
></script>

二、旋转小人

来源于博友@刘郎阁的分享，原帖链接：

https://yjvc.cn/index.php/archives/940/

该彩蛋在博客中位于此页面：

<div class="twopeople">
    <div class="container" style="height:200px;">
        <canvas class="illo" width="800" height="800" style="max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;"></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/twopeople1.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/zdog.dist.js"></script>
    <script id="rendered-js" src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/twopeople.js"></script>
    <style>
        .twopeople{
            margin: 0;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        canvas {
            display: block;
            margin: 0 auto;
            cursor: move;
        }
    </style>
</div>