zqlit/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

223

Browse Source
This commit is contained in:
小赵同学 committed 2024-08-09 14:05:41 +08:00
1 parent 50bf6c8a87
commit e2bb43046c
80 files changed
+335 -872
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/post/rss.xml
-152
View File
@@ -7,158 +7,6 @@
<generator>Hugo -- gohugo.io</generator>
<language>zh-cn</language>
<lastBuildDate>Wed, 07 Aug 2024 16:10:05 +0800</lastBuildDate><atom:link href="https://usj.cc/post/rss.xml" rel="self" type="application/rss+xml" />
<item>
<title>添加ikun摆件</title>
<link>https://usj.cc/post/ikun/</link>
<pubDate>Wed, 07 Aug 2024 16:10:05 +0800</pubDate>
<guid>https://usj.cc/post/ikun/</guid>
<description>近日，在浏览GitHub时，首页推送了一个这样的项目，无意点进去，试玩了一下 还是很有意思的，按住人物的立牌拖拽、松手后立牌会向反方向弹跳，还</description>
<content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="添加ikun摆件" /><p>近日，在浏览GitHub时，首页推送了一个这样的项目，无意点进去，试玩了一下</p>
<p>还是很有意思的，按住人物的立牌拖拽、松手后立牌会向反方向弹跳，还有惯性力效果</p>
<p>主要是还自带音效，在适当区间松手时还会触发语音效果</p>
<p>
<a
href="/tiaozhuan/index.html?target=aHR0cHM6Ly9naXRodWIuY29tL2l0b3JyL3Nha2FuYQ%3d%3d"
target="_blank"
>
https://github.com/itorr/sakana</a> 「Sakana!」石蒜模拟器</p>
<p>预览地址：https://lab.magiconch.com/sakana</p>
<h2 id="继续整活">继续整活</h2>
<p>因为主题是单栏风格，内容的两边有很多留白，所以思来想去，决定把这个摆件整合进来</p>
<p>作为一个合格的ikun，当然也少不了整活，于是研究一下源码，修改源码，一气呵成</p>
<p>为了方便维护，将语音包进行base64转码，于是乎就实现了以下效果，鼠标拖拽，适当角度就会触发语音包</p>
<p>
<img data-lazy-src="/pics/hugo/ikun/image-20240807153134059.png" alt="image-20240807153134059" class="lazyload"></p>
<h4 id="快速食用">快速食用</h4>
<p>考虑到很多小伙伴也需要，这里把代码梳理一下 发出来</p>
<p>将以下css加入主题的<!-- raw HTML omitted --><!-- raw HTML omitted -->标签的<!-- raw HTML omitted --><!-- raw HTML omitted -->标签里</p>
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span><span style="color:#ce5c00;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span> <span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">rem</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">555</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">media</span> <span style="color:#ce5c00;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">max-width</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">650px</span><span style="color:#ce5c00;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span><span style="color:#ce5c00;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">media</span> <span style="color:#ce5c00;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">max-width</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">1120px</span><span style="color:#ce5c00;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span><span style="color:#ce5c00;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">translateY</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#204a87">scale</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">0.25</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span> <span style="color:#000;font-weight:bold">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">rem</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">500</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">800</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">100</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#204a87;font-weight:bold">canvas</span> <span style="color:#000;font-weight:bold">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">bottom</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-character</span> <span style="color:#000;font-weight:bold">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">300</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">300</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">bottom</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">260</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">cursor</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">pointer</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">400</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">no-repeat</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-size</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">cover</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-character</span><span style="color:#ce5c00;font-weight:bold">[</span><span style="color:#204a87;font-weight:bold">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#204a87;font-weight:bold">chisato</span><span style="color:#ce5c00;font-weight:bold">]</span> <span style="color:#000;font-weight:bold">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-image</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">url</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">这里填写自定义摆件图片url</span><span style="color:#000;font-weight:bold">)</span><span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-character</span><span style="color:#ce5c00;font-weight:bold">[</span><span style="color:#204a87;font-weight:bold">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#204a87;font-weight:bold">takina</span><span style="color:#ce5c00;font-weight:bold">]</span> <span style="color:#000;font-weight:bold">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-image</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">url</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">这里填写自定义摆件图片url</span><span style="color:#000;font-weight:bold">)</span><span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-bed</span> <span style="color:#000;font-weight:bold">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">160</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">bottom</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">255</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">255</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">255</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.5</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#204a87;font-weight:bold">no-repeat</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">cursor</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">pointer</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-image</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">url</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAAnRSTlMAM8lDrC4AAAE2SURBVEjH7dVBjsMwCAVQiyUnGXG0OQXqsqdgif4pJ8YkTh1bnWqkWVRlkVR+BiHiJuUT7x3sKxGsBNBXhQBbiazF58LglXgTnwmi6EToqfBc2IvoKAWat/8Qu0g2JUYoV7EXhf4iD48JiFGKDkIAvA15EMEWmuXFuxAQSbuI9ZSIFEYXAMaAQpvAejGtC9aEugg8Mh1AxbieD7pAANi5HFqTnNLL0X4P0VYk92rKfZP4oSVlb/7uuWVvzZ/LDYPYSmD5nznG4ycR2FwI8BAbhQFUER9F4pGm9JbkkDqOQeAEY+QIu3gtGFJibt+7bCvQIiaeU4YeoiHYhB+EmtxgOZiTWJV7LHyl9ENVL8fO89l1AvwqjAi7SmmiF8kkn761o9hUOFOuUsh+9Q2w14WXQlo+8Z7xAxPfAJiIc7LIAAAAAElFTkSuQmCC</span><span style="color:#000;font-weight:bold">);</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-size</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">box-shadow</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.05</span><span style="color:#000;font-weight:bold">);</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span><span style="color:#ce5c00;font-weight:bold">[</span><span style="color:#204a87;font-weight:bold">data-can-switch-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#204a87;font-weight:bold">true</span><span style="color:#ce5c00;font-weight:bold">]</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-bed</span> <span style="color:#000;font-weight:bold">{</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
</span></span></code></pre></div><p>在footer底部引入js</p>
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold">&lt;</span><span style="color:#000">script</span> <span style="color:#000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;https://usj.cc/js/sakana.js&#34;</span><span style="color:#ce5c00;font-weight:bold">&gt;&lt;</span><span style="color:#a40000">/script&gt;</span>
</span></span></code></pre></div><p>在主题的自定义js进行插件初始化</p>
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span> <span style="color:#ce5c00;font-weight:bold">&lt;</span><span style="color:#000">script</span><span style="color:#ce5c00;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">Sakana</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">setMute</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">false</span><span style="color:#000;font-weight:bold">);</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">Sakana</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">init</span><span style="color:#000;font-weight:bold">({</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">el</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#4e9a06">&#39;.sakana-box-l&#39;</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">scale</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#0000cf;font-weight:bold">9</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">character</span><span style="color:#ce5c00;font-weight:bold">:</span><span style="color:#4e9a06">&#39;takina&#39;</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">canSwitchCharacter</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">false</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">inertia</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0.001</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">decay</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">1</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">});</span>
</span></span><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold">&lt;</span><span style="color:#a40000">/script&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold">&lt;</span><span style="color:#000">script</span><span style="color:#ce5c00;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">Sakana</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">setMute</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">false</span><span style="color:#000;font-weight:bold">);</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">Sakana</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">init</span><span style="color:#000;font-weight:bold">({</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">el</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#4e9a06">&#39;.sakana-box-r&#39;</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">scale</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#0000cf;font-weight:bold">9</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">character</span><span style="color:#ce5c00;font-weight:bold">:</span><span style="color:#4e9a06">&#39;chisato&#39;</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">canSwitchCharacter</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">false</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">inertia</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0.001</span><span style="color:#000;font-weight:bold">,</span>
</span></span><span style="display:flex;"><span> <span style="color:#000">decay</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">1</span>
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">});</span>
</span></span><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold">&lt;</span><span style="color:#a40000">/script&gt;</span>
</span></span></code></pre></div><p>在你想展示的位置添加div标签</p>
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sakana-box-l sakana-box&#34;</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;transform: translateY(0px) scale(0.5);&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">canvas</span> <span style="color:#c4a000">width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;750&#34;</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1200&#34;</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width: 500px; height: 800px;&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">canvas</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sakana-character&#34;</span> <span style="color:#c4a000">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;takina&#34;</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;transform: rotate(0.263216deg) translateX(0.263216px) translateY(14.4649px);&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sakana-bed&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sakana-box-r sakana-box&#34;</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;transform: translateY(0px) scale(0.5);&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">canvas</span> <span style="color:#c4a000">width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;750&#34;</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;1200&#34;</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;width: 500px; height: 800px;&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">canvas</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sakana-character&#34;</span> <span style="color:#c4a000">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;chisato&#34;</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;transform: rotate(0.128919deg) translateX(0.128919px) translateY(0.334859px);&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;&lt;</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">&#34;sakana-bed&#34;</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;&lt;/</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">&gt;</span>
</span></span></code></pre></div><p>大功告成！</p>
]]></content:encoded>
</item>
<item>
<title>主机配置单</title>
<link>https://usj.cc/post/1287/</link>