8.7
This commit is contained in:
小赵同学 committed
1 parent
9507fa0f7b
commit
8a54f7f516
5 files changed
+107
-83
No files matched your search
+15
-15
@@ -25,11 +25,11 @@ tags: []
|
||||
|
||||
|
||||
|
||||
```html
|
||||
https://github.com/itorr/sakana 「Sakana!」石蒜模拟器
|
||||
|
||||
|
||||
|
||||
预览地址：https://lab.magiconch.com/sakana
|
||||
```
|
||||
|
||||
|
||||
|
||||
@@ -49,7 +49,7 @@ https://github.com/itorr/sakana 「Sakana!」石蒜模拟器
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -187,18 +187,18 @@ https://github.com/itorr/sakana 「Sakana!」石蒜模拟器
|
||||
inertia: 0.001,
|
||||
decay: 1
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
Sakana.setMute(false);
|
||||
Sakana.init({
|
||||
el: '.sakana-box-r',
|
||||
scale: .9,
|
||||
character:'chisato',
|
||||
canSwitchCharacter: false,
|
||||
inertia: 0.001,
|
||||
decay: 1
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
<script>
|
||||
Sakana.setMute(false);
|
||||
Sakana.init({
|
||||
el: '.sakana-box-r',
|
||||
scale: .9,
|
||||
character:'chisato',
|
||||
canSwitchCharacter: false,
|
||||
inertia: 0.001,
|
||||
decay: 1
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
@@ -18,15 +18,21 @@
|
||||
<content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="添加ikun摆件" /><p>近日，在浏览GitHub时，首页推送了一个这样的项目，无意点进去，试玩了一下</p>
|
||||
<p>还是很有意思的，按住人物的立牌拖拽、松手后立牌会向反方向弹跳，还有惯性力效果</p>
|
||||
<p>主要是还自带音效，在适当区间松手时还会触发语音效果</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>https://github.com/itorr/sakana 「Sakana!」石蒜模拟器
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>预览地址：https://lab.magiconch.com/sakana
|
||||
</span></span></code></pre></div><h4 id="继续整活">继续整活</h4>
|
||||
<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>
|
||||
<h4 id="继续整活">继续整活</h4>
|
||||
<p>因为主题是单栏风格，内容的两边有很多留白，所以思来想去，决定把这个摆件整合进来</p>
|
||||
<p>作为一个合格的ikun，当然也少不了整活，于是研究一下源码，修改源码，一气呵成</p>
|
||||
<p>为了方便维护，将语音包进行base64转码，于是乎就实现了以下效果，鼠标拖拽，适当角度就会触发语音包</p>
|
||||
<p>
|
||||
<img data-lazy-src="/static/pics/hugo/ikun/image-20240807153134059.png" alt="image-20240807153134059" class="lazyload"></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>
|
||||
@@ -134,18 +140,18 @@
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#a6e22e">script</span><span style="color:#f92672">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">setMute</span>(<span style="color:#66d9ef">false</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">init</span>({
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">el</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'.sakana-box-r'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scale</span><span style="color:#f92672">:</span> .<span style="color:#ae81ff">9</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">character</span><span style="color:#f92672">:</span><span style="color:#e6db74">'chisato'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">canSwitchCharacter</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#a6e22e">script</span><span style="color:#f92672">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">setMute</span>(<span style="color:#66d9ef">false</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">init</span>({
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">el</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'.sakana-box-r'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scale</span><span style="color:#f92672">:</span> .<span style="color:#ae81ff">9</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">character</span><span style="color:#f92672">:</span><span style="color:#e6db74">'chisato'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">canSwitchCharacter</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span></code></pre></div><p>在你想展示的位置添加div标签</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-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:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-box-l sakana-box"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: translateY(0px) scale(0.5);"</span>><<span style="color:#f92672">canvas</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"750"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"1200"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 500px; height: 800px;"</span>></<span style="color:#f92672">canvas</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-character"</span> <span style="color:#a6e22e">data-character</span><span style="color:#f92672">=</span><span style="color:#e6db74">"takina"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: rotate(0.263216deg) translateX(0.263216px) translateY(14.4649px);"</span>></<span style="color:#f92672">div</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-bed"</span>></<span style="color:#f92672">div</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-box-r sakana-box"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: translateY(0px) scale(0.5);"</span>><<span style="color:#f92672">canvas</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"750"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"1200"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 500px; height: 800px;"</span>></<span style="color:#f92672">canvas</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-character"</span> <span style="color:#a6e22e">data-character</span><span style="color:#f92672">=</span><span style="color:#e6db74">"chisato"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: rotate(0.128919deg) translateX(0.128919px) translateY(0.334859px);"</span>></<span style="color:#f92672">div</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-bed"</span>></<span style="color:#f92672">div</span>></<span style="color:#f92672">div</span>>
|
||||
|
||||
+23
-17
@@ -79,15 +79,21 @@
|
||||
<p>近日，在浏览GitHub时，首页推送了一个这样的项目，无意点进去，试玩了一下</p>
|
||||
<p>还是很有意思的，按住人物的立牌拖拽、松手后立牌会向反方向弹跳，还有惯性力效果</p>
|
||||
<p>主要是还自带音效，在适当区间松手时还会触发语音效果</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>https://github.com/itorr/sakana 「Sakana!」石蒜模拟器
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>预览地址：https://lab.magiconch.com/sakana
|
||||
</span></span></code></pre></div><h4 id="继续整活">继续整活</h4>
|
||||
<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>
|
||||
<h4 id="继续整活">继续整活</h4>
|
||||
<p>因为主题是单栏风格，内容的两边有很多留白，所以思来想去，决定把这个摆件整合进来</p>
|
||||
<p>作为一个合格的ikun，当然也少不了整活，于是研究一下源码，修改源码，一气呵成</p>
|
||||
<p>为了方便维护，将语音包进行base64转码，于是乎就实现了以下效果，鼠标拖拽，适当角度就会触发语音包</p>
|
||||
<p>
|
||||
<img data-lazy-src="/static/pics/hugo/ikun/image-20240807153134059.png" alt="image-20240807153134059" class="lazyload"></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>
|
||||
@@ -195,18 +201,18 @@
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#a6e22e">script</span><span style="color:#f92672">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">setMute</span>(<span style="color:#66d9ef">false</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">init</span>({
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">el</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'.sakana-box-r'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scale</span><span style="color:#f92672">:</span> .<span style="color:#ae81ff">9</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">character</span><span style="color:#f92672">:</span><span style="color:#e6db74">'chisato'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">canSwitchCharacter</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#a6e22e">script</span><span style="color:#f92672">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">setMute</span>(<span style="color:#66d9ef">false</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">init</span>({
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">el</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'.sakana-box-r'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scale</span><span style="color:#f92672">:</span> .<span style="color:#ae81ff">9</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">character</span><span style="color:#f92672">:</span><span style="color:#e6db74">'chisato'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">canSwitchCharacter</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span></code></pre></div><p>在你想展示的位置添加div标签</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-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:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-box-l sakana-box"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: translateY(0px) scale(0.5);"</span>><<span style="color:#f92672">canvas</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"750"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"1200"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 500px; height: 800px;"</span>></<span style="color:#f92672">canvas</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-character"</span> <span style="color:#a6e22e">data-character</span><span style="color:#f92672">=</span><span style="color:#e6db74">"takina"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: rotate(0.263216deg) translateX(0.263216px) translateY(14.4649px);"</span>></<span style="color:#f92672">div</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-bed"</span>></<span style="color:#f92672">div</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-box-r sakana-box"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: translateY(0px) scale(0.5);"</span>><<span style="color:#f92672">canvas</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"750"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"1200"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 500px; height: 800px;"</span>></<span style="color:#f92672">canvas</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-character"</span> <span style="color:#a6e22e">data-character</span><span style="color:#f92672">=</span><span style="color:#e6db74">"chisato"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: rotate(0.128919deg) translateX(0.128919px) translateY(0.334859px);"</span>></<span style="color:#f92672">div</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-bed"</span>></<span style="color:#f92672">div</span>></<span style="color:#f92672">div</span>>
|
||||
|
||||
+23
-17
@@ -18,15 +18,21 @@
|
||||
<content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="添加ikun摆件" /><p>近日，在浏览GitHub时，首页推送了一个这样的项目，无意点进去，试玩了一下</p>
|
||||
<p>还是很有意思的，按住人物的立牌拖拽、松手后立牌会向反方向弹跳，还有惯性力效果</p>
|
||||
<p>主要是还自带音效，在适当区间松手时还会触发语音效果</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>https://github.com/itorr/sakana 「Sakana!」石蒜模拟器
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>预览地址：https://lab.magiconch.com/sakana
|
||||
</span></span></code></pre></div><h4 id="继续整活">继续整活</h4>
|
||||
<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>
|
||||
<h4 id="继续整活">继续整活</h4>
|
||||
<p>因为主题是单栏风格，内容的两边有很多留白，所以思来想去，决定把这个摆件整合进来</p>
|
||||
<p>作为一个合格的ikun，当然也少不了整活，于是研究一下源码，修改源码，一气呵成</p>
|
||||
<p>为了方便维护，将语音包进行base64转码，于是乎就实现了以下效果，鼠标拖拽，适当角度就会触发语音包</p>
|
||||
<p>
|
||||
<img data-lazy-src="/static/pics/hugo/ikun/image-20240807153134059.png" alt="image-20240807153134059" class="lazyload"></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>
|
||||
@@ -134,18 +140,18 @@
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#a6e22e">script</span><span style="color:#f92672">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">setMute</span>(<span style="color:#66d9ef">false</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">init</span>({
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">el</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'.sakana-box-r'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scale</span><span style="color:#f92672">:</span> .<span style="color:#ae81ff">9</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">character</span><span style="color:#f92672">:</span><span style="color:#e6db74">'chisato'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">canSwitchCharacter</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#a6e22e">script</span><span style="color:#f92672">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">setMute</span>(<span style="color:#66d9ef">false</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">init</span>({
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">el</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'.sakana-box-r'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scale</span><span style="color:#f92672">:</span> .<span style="color:#ae81ff">9</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">character</span><span style="color:#f92672">:</span><span style="color:#e6db74">'chisato'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">canSwitchCharacter</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span></code></pre></div><p>在你想展示的位置添加div标签</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-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:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-box-l sakana-box"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: translateY(0px) scale(0.5);"</span>><<span style="color:#f92672">canvas</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"750"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"1200"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 500px; height: 800px;"</span>></<span style="color:#f92672">canvas</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-character"</span> <span style="color:#a6e22e">data-character</span><span style="color:#f92672">=</span><span style="color:#e6db74">"takina"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: rotate(0.263216deg) translateX(0.263216px) translateY(14.4649px);"</span>></<span style="color:#f92672">div</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-bed"</span>></<span style="color:#f92672">div</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-box-r sakana-box"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: translateY(0px) scale(0.5);"</span>><<span style="color:#f92672">canvas</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"750"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"1200"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 500px; height: 800px;"</span>></<span style="color:#f92672">canvas</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-character"</span> <span style="color:#a6e22e">data-character</span><span style="color:#f92672">=</span><span style="color:#e6db74">"chisato"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: rotate(0.128919deg) translateX(0.128919px) translateY(0.334859px);"</span>></<span style="color:#f92672">div</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-bed"</span>></<span style="color:#f92672">div</span>></<span style="color:#f92672">div</span>>
|
||||
|
||||
+23
-17
@@ -18,15 +18,21 @@
|
||||
<content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="添加ikun摆件" /><p>近日，在浏览GitHub时，首页推送了一个这样的项目，无意点进去，试玩了一下</p>
|
||||
<p>还是很有意思的，按住人物的立牌拖拽、松手后立牌会向反方向弹跳，还有惯性力效果</p>
|
||||
<p>主要是还自带音效，在适当区间松手时还会触发语音效果</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>https://github.com/itorr/sakana 「Sakana!」石蒜模拟器
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span>预览地址：https://lab.magiconch.com/sakana
|
||||
</span></span></code></pre></div><h4 id="继续整活">继续整活</h4>
|
||||
<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>
|
||||
<h4 id="继续整活">继续整活</h4>
|
||||
<p>因为主题是单栏风格，内容的两边有很多留白，所以思来想去，决定把这个摆件整合进来</p>
|
||||
<p>作为一个合格的ikun，当然也少不了整活，于是研究一下源码，修改源码，一气呵成</p>
|
||||
<p>为了方便维护，将语音包进行base64转码，于是乎就实现了以下效果，鼠标拖拽，适当角度就会触发语音包</p>
|
||||
<p>
|
||||
<img data-lazy-src="/static/pics/hugo/ikun/image-20240807153134059.png" alt="image-20240807153134059" class="lazyload"></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>
|
||||
@@ -134,18 +140,18 @@
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#a6e22e">script</span><span style="color:#f92672">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">setMute</span>(<span style="color:#66d9ef">false</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">init</span>({
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">el</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'.sakana-box-r'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scale</span><span style="color:#f92672">:</span> .<span style="color:#ae81ff">9</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">character</span><span style="color:#f92672">:</span><span style="color:#e6db74">'chisato'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">canSwitchCharacter</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#a6e22e">script</span><span style="color:#f92672">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">setMute</span>(<span style="color:#66d9ef">false</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">Sakana</span>.<span style="color:#a6e22e">init</span>({
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">el</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'.sakana-box-r'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">scale</span><span style="color:#f92672">:</span> .<span style="color:#ae81ff">9</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">character</span><span style="color:#f92672">:</span><span style="color:#e6db74">'chisato'</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">canSwitchCharacter</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">false</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">inertia</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">0.001</span>,
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">decay</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">1</span>
|
||||
</span></span><span style="display:flex;"><span> });
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
</span></span></code></pre></div><p>在你想展示的位置添加div标签</p>
|
||||
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-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:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-box-l sakana-box"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: translateY(0px) scale(0.5);"</span>><<span style="color:#f92672">canvas</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"750"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"1200"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 500px; height: 800px;"</span>></<span style="color:#f92672">canvas</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-character"</span> <span style="color:#a6e22e">data-character</span><span style="color:#f92672">=</span><span style="color:#e6db74">"takina"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: rotate(0.263216deg) translateX(0.263216px) translateY(14.4649px);"</span>></<span style="color:#f92672">div</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-bed"</span>></<span style="color:#f92672">div</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-box-r sakana-box"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: translateY(0px) scale(0.5);"</span>><<span style="color:#f92672">canvas</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"750"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"1200"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"width: 500px; height: 800px;"</span>></<span style="color:#f92672">canvas</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-character"</span> <span style="color:#a6e22e">data-character</span><span style="color:#f92672">=</span><span style="color:#e6db74">"chisato"</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">"transform: rotate(0.128919deg) translateX(0.128919px) translateY(0.334859px);"</span>></<span style="color:#f92672">div</span>><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"sakana-bed"</span>></<span style="color:#f92672">div</span>></<span style="color:#f92672">div</span>>
|
||||
|
||||
Reference in new issue
Block a user