8.9 修改代码高亮样式
This commit is contained in:
小赵同学 committed
1 parent
62cac6c7b0
commit
2e11da0d0b
15 files changed
+2414
-2410
No files matched your search
+104
-104
@@ -97,125 +97,125 @@ https://github.com/itorr/sakana</a> 「Sakana!」石蒜模拟器</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="color:#f8f8f2;background-color:#272822;-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:#a6e22e">sakana-box-l</span><span style="color:#f92672">,</span>
|
||||
</span></span><span style="display:flex;"><span>.<span style="color:#a6e22e">sakana-box-r</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">fixed</span> <span style="color:#75715e">!important</span>;
|
||||
</span></span><span style="display:flex;"><span> inset: <span style="color:#66d9ef">auto</span> <span style="color:#66d9ef">auto</span> <span style="color:#ae81ff">-1</span><span style="color:#66d9ef">rem</span> <span style="color:#ae81ff">-5</span><span style="color:#66d9ef">rem</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>: <span style="color:#ae81ff">555</span>;
|
||||
</span></span><span style="display:flex;"><span>}
|
||||
<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:#a6e22e">sakana-box-r</span> {
|
||||
</span></span><span style="display:flex;"><span> inset: <span style="color:#66d9ef">auto</span> <span style="color:#ae81ff">-5</span><span style="color:#66d9ef">rem</span> <span style="color:#ae81ff">-1</span><span style="color:#66d9ef">rem</span> <span style="color:#66d9ef">auto</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:#66d9ef">media</span> <span style="color:#f92672">(</span><span style="color:#f92672">max-width</span><span style="color:#f92672">:</span> <span style="color:#f92672">650px</span><span style="color:#f92672">)</span> {
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-l</span><span style="color:#f92672">,</span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-r</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">none</span>;
|
||||
</span></span><span style="display:flex;"><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:#66d9ef">media</span> <span style="color:#f92672">(</span><span style="color:#f92672">max-width</span><span style="color:#f92672">:</span> <span style="color:#f92672">1120px</span><span style="color:#f92672">)</span> {
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-l</span><span style="color:#f92672">,</span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">sakana-box-r</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">transform</span>: translateY(<span style="color:#ae81ff">0</span><span style="color:#66d9ef">px</span>) scale(<span style="color:#ae81ff">0.25</span>) <span style="color:#75715e">!important</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:#a6e22e">sakana-box-l</span> {
|
||||
</span></span><span style="display:flex;"><span> inset: <span style="color:#66d9ef">auto</span> <span style="color:#66d9ef">auto</span> <span style="color:#ae81ff">-1</span><span style="color:#66d9ef">rem</span> <span style="color:#ae81ff">-10</span><span style="color:#66d9ef">rem</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:#a6e22e">sakana-box-r</span> {
|
||||
</span></span><span style="display:flex;"><span> inset: <span style="color:#66d9ef">auto</span> <span style="color:#ae81ff">-10</span><span style="color:#66d9ef">rem</span> <span style="color:#ae81ff">-1</span><span style="color:#66d9ef">rem</span> <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><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:#a6e22e">sakana-box</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">500</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">800</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">relative</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">transform-origin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">100</span><span style="color:#66d9ef">%</span>;
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">none</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:#a6e22e">sakana-box</span> <span style="color:#f92672">canvas</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">bottom</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">none</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:#a6e22e">sakana-box</span> .<span style="color:#a6e22e">sakana-character</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">300</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">300</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">0</span> <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">bottom</span>: <span style="color:#ae81ff">260</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">cursor</span>: <span style="color:#66d9ef">pointer</span>;
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">transform-origin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">400</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#66d9ef">no-repeat</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-size</span>: <span style="color:#66d9ef">cover</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:#a6e22e">sakana-box</span> .<span style="color:#a6e22e">sakana-character</span><span style="color:#f92672">[</span><span style="color:#f92672">data-character</span><span style="color:#f92672">=</span><span style="color:#f92672">chisato</span><span style="color:#f92672">]</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-image</span>: url(<span style="color:#e6db74">这里填写自定义摆件图片url</span>)<span style="color:#75715e">!important</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:#a6e22e">sakana-box</span> .<span style="color:#a6e22e">sakana-character</span><span style="color:#f92672">[</span><span style="color:#f92672">data-character</span><span style="color:#f92672">=</span><span style="color:#f92672">takina</span><span style="color:#f92672">]</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-image</span>: url(<span style="color:#e6db74">这里填写自定义摆件图片url</span>)<span style="color:#75715e">!important</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:#a6e22e">sakana-box</span> .<span style="color:#a6e22e">sakana-bed</span> {
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">160</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">0</span> <span style="color:#66d9ef">auto</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">bottom</span>: <span style="color:#ae81ff">0</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: rgba(<span style="color:#ae81ff">255</span>, <span style="color:#ae81ff">255</span>, <span style="color:#ae81ff">255</span>, <span style="color:#ae81ff">.5</span>) <span style="color:#66d9ef">no-repeat</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">cursor</span>: <span style="color:#66d9ef">pointer</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-image</span>: url(<span style="color:#e6db74">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAAnRSTlMAM8lDrC4AAAE2SURBVEjH7dVBjsMwCAVQiyUnGXG0OQXqsqdgif4pJ8YkTh1bnWqkWVRlkVR+BiHiJuUT7x3sKxGsBNBXhQBbiazF58LglXgTnwmi6EToqfBc2IvoKAWat/8Qu0g2JUYoV7EXhf4iD48JiFGKDkIAvA15EMEWmuXFuxAQSbuI9ZSIFEYXAMaAQpvAejGtC9aEugg8Mh1AxbieD7pAANi5HFqTnNLL0X4P0VYk92rKfZP4oSVlb/7uuWVvzZ/LDYPYSmD5nznG4ycR2FwI8BAbhQFUER9F4pGm9JbkkDqOQeAEY+QIu3gtGFJibt+7bCvQIiaeU4YeoiHYhB+EmtxgOZiTWJV7LHyl9ENVL8fO89l1AvwqjAi7SmmiF8kkn761o9hUOFOuUsh+9Q2w14WXQlo+8Z7xAxPfAJiIc7LIAAAAAElFTkSuQmCC</span>);
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background-size</span>: <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>;
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">box-shadow</span>: <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span> rgba(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">.05</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:#a6e22e">sakana-box</span><span style="color:#f92672">[</span><span style="color:#f92672">data-can-switch-character</span><span style="color:#f92672">=</span><span style="color:#f92672">true</span><span style="color:#f92672">]</span> .<span style="color:#a6e22e">sakana-bed</span> {
|
||||
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">auto</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="color:#f8f8f2;background-color:#272822;-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:#f92672"><</span><span style="color:#a6e22e">script</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://usj.cc/js/sakana.js"</span><span style="color:#f92672">><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
<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"><</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">"https://usj.cc/js/sakana.js"</span><span style="color:#ce5c00;font-weight:bold">><</span><span style="color:#a40000">/script></span>
|
||||
</span></span></code></pre></div><p>在主题的自定义js进行插件初始化</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-js" data-lang="js"><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-l'</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">'takina'</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:#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>
|
||||
<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"><</span><span style="color:#000">script</span><span style="color:#ce5c00;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">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">'.sakana-box-l'</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">'takina'</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"><</span><span style="color:#a40000">/script></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#000">script</span><span style="color:#ce5c00;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">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">'.sakana-box-r'</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">'chisato'</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"><</span><span style="color:#a40000">/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>>
|
||||
<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"><</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">"sakana-box-l sakana-box"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"transform: translateY(0px) scale(0.5);"</span><span style="color:#000;font-weight:bold">><</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">"750"</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"1200"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"width: 500px; height: 800px;"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">canvas</span><span style="color:#000;font-weight:bold">><</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">"sakana-character"</span> <span style="color:#c4a000">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"takina"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"transform: rotate(0.263216deg) translateX(0.263216px) translateY(14.4649px);"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">><</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">"sakana-bed"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</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:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"sakana-box-r sakana-box"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"transform: translateY(0px) scale(0.5);"</span><span style="color:#000;font-weight:bold">><</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">"750"</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"1200"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"width: 500px; height: 800px;"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">canvas</span><span style="color:#000;font-weight:bold">><</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">"sakana-character"</span> <span style="color:#c4a000">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"chisato"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"transform: rotate(0.128919deg) translateX(0.128919px) translateY(0.334859px);"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">><</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">"sakana-bed"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span></code></pre></div><p>大功告成！</p>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user