8.7
This commit is contained in:
小赵同学 committed
1 parent
83ff3f7730
commit
9507fa0f7b
87 files changed
+1425
-344
No files matched your search
@@ -0,0 +1,345 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>添加ikun摆件</title>
|
||||
<link rel="alternate" type="application/rss+xml" title="优世界" href="/rss.xml">
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||
<link rel='stylesheet' href='/css/main.css'>
|
||||
<link rel="stylesheet" href="/css/normalize.css">
|
||||
<link rel="stylesheet" href="/css/remixicon.css">
|
||||
<link rel="stylesheet" href="/css/uikit.min.css">
|
||||
<link rel="stylesheet" href="/css/nprogress.min.css">
|
||||
<link rel="stylesheet" href="/css/mywaline.css" />
|
||||
<script src="/js/jquery.min.js"></script>
|
||||
<script src="/js/barrage.min.js"></script>
|
||||
<script src="/js/jquery.scrollUp.min.js"></script>
|
||||
<script src="/js/instantpage.min.js" type="module" defer></script>
|
||||
<script src="/js/pjax.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/css/mywaline.css" />
|
||||
|
||||
<script>console.log("\n %c Amigo Theme %c https://usj.cc \n", "color: #fadfa3; background: #030307; padding:3px; font-size:12px;", "color: #ffffff;background: #16171a; padding: 3px; font-size: 12px;");</script>
|
||||
<meta name="keywords" content="大学,教程,blog,优世界,优设计,博客,大学生博客,生活,文案," />
|
||||
<meta name="template" content="Amigo" />
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="main">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="head_author_img load-memos-editor">
|
||||
<img src="/image/avatar.jpg" class="blog-img" width="80" height="80" alt="优世界" />
|
||||
</div>
|
||||
<div class="site-description">
|
||||
<h2><span class="uk-invisible">风吹云散，云卷云舒</span></h2>
|
||||
<nav class="nav social uk-visible@m">
|
||||
<ul class="flat">
|
||||
|
||||
|
||||
<a href="https://pan.usj.cc" title="GitHub" target="_blank"><i class="ri-cloudy-2-line"></i></a>
|
||||
|
||||
<a href="https://space.bilibili.com/525472039" title="Twitter" target="_blank"><i class="ri-bilibili-line"></i></a>
|
||||
|
||||
<a href="https://github.com/imzql" title="LinkedIn" target="_blank"><i class="ri-github-fill"></i></a>
|
||||
|
||||
|
||||
</ul>
|
||||
<div class="yiyandes">风吹云散，云卷云舒</div>
|
||||
</nav>
|
||||
</div>
|
||||
<nav class="nav">
|
||||
<ul class="flat">
|
||||
<li class="active"><a href="/">首页</a></li>
|
||||
<li class="active"><a href="/about/">关于</a></li>
|
||||
<li class="active"><a href="/ly/">留言</a></li>
|
||||
<li class="active"><a href="/archives/">归档</a></li>
|
||||
<li class="active"><a href="/links/">友链</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="pjax-container">
|
||||
<article style="margin-bottom: 3.5em;">
|
||||
<h1 class="post-title" itemprop="name headline">添加ikun摆件</h1>
|
||||
<div class="meta">
|
||||
作者: 小赵同学 浏览: <span id="busuanzi_value_page_uv"></span> 字数: 694 分类:
|
||||
|
||||
<a href="%e7%94%9f%e6%b4%bb">生活</a>
|
||||
|
||||
</div>
|
||||
<div class="post-content" itemprop="articleBody" uk-scrollspy="target: > hr,h2,p; cls: uk-animation-fade; delay: 0">
|
||||
<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>因为主题是单栏风格，内容的两边有很多留白，所以思来想去，决定把这个摆件整合进来</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>
|
||||
<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>}
|
||||
</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></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></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></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></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></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></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></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></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></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></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></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></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>
|
||||
</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>
|
||||
</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>>
|
||||
</span></span></code></pre></div><p>大功告成！</p>
|
||||
|
||||
</div>
|
||||
<div class="post-tags" style="margin-top: -30px;">
|
||||
<nav class="nav tags">
|
||||
<ul class="flat">
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
<hr class="uk-divider-icon">
|
||||
<div id="comments" class="comments-area">
|
||||
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="/css/mywaline.css"
|
||||
/>
|
||||
<div id="waline"></div>
|
||||
<script src="/js/waline.js"></script>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function loadBarrager() {
|
||||
|
||||
var currentPath = "\/post\/ikun\/";
|
||||
|
||||
|
||||
if (currentPath.includes("post") || currentPath.includes("says")) {
|
||||
|
||||
fetchCommentsAndCreateBarrager(currentPath, {
|
||||
looper_time: 3000,
|
||||
defaultAvatar: 'static/default-avatar.png',
|
||||
defaultInfo: 'No comment',
|
||||
defaultLink: '#',
|
||||
speed: 10,
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script async src="/js/bsz.js"></script>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="footer">
|
||||
<nav class="nav" style="clear: both;">
|
||||
© 2019 - 2024
|
||||
<br>
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank"><span style="color:#999999;">鄂ICP备2022015735号-1</span></a>
|
||||
<br>
|
||||
本站由<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="blank" title="又拍云"
|
||||
style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
|
||||
<span style="color: var(--contentColor);font-weight: 700;">又拍云CDN</span>
|
||||
</a>提供CDN加速服务
|
||||
<br>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/iconfont.js"></script>
|
||||
<script src="/js/lightgallery.umd.min.js"></script>
|
||||
<script src="/js/uikit.min.js"></script>
|
||||
<script src="/js/EasyLazyload.min.js"></script>
|
||||
<script src="/js/view-image.min.js"></script>
|
||||
<script src="/js/main.js"></script>
|
||||
<script src="/js/mypjax.js"></script>
|
||||
<script src="/js/nprogress.js"></script>
|
||||
<script src="/js/echarts.min.js"></script>
|
||||
<script src="/js/waline.js"></script>
|
||||
<script src="/js/circles/app.min.js"></script>
|
||||
<script src="/js/circles/bundle.js"></script>
|
||||
<script src="/js/tiaozhuan.js"></script>
|
||||
<script async src="/js/bsz.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
if (document.querySelector("#waline")) {
|
||||
Waline.init({
|
||||
el: '#waline',
|
||||
serverURL: 'https://waline.usj.cc',
|
||||
lang: "zh-cn",
|
||||
imageUploader: false,
|
||||
search: false,
|
||||
copyright: false,
|
||||
requiredMeta:['nick', 'mail'],
|
||||
login:'enable',
|
||||
pageSize:10,
|
||||
highlighter:true,
|
||||
reaction: [
|
||||
'/image/EhqxZ6DFIJojGNa.gif',
|
||||
'/image/qmf5As3evWNXwGQ.gif',
|
||||
'/image/ueWLPkmYw75x4cs.gif',
|
||||
'/image/nsC1OGoBKfa8Hel.gif',
|
||||
'/image/VKuBXqR91TPHnyc.gif',
|
||||
'/image/2OmAWPeulq4ta8T.gif'
|
||||
],
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<div class="sakana-box-l sakana-box" style="transform: translateY(0px) scale(0.5);"><canvas width="750" height="1200" style="width: 500px; height: 800px;"></canvas><div class="sakana-character" data-character="takina" style="transform: rotate(0.263216deg) translateX(0.263216px) translateY(14.4649px);"></div><div class="sakana-bed"></div></div>
|
||||
<div class="sakana-box-r sakana-box" style="transform: translateY(0px) scale(0.5);"><canvas width="750" height="1200" style="width: 500px; height: 800px;"></canvas><div class="sakana-character" data-character="chisato" style="transform: rotate(0.128919deg) translateX(0.128919px) translateY(0.334859px);"></div><div class="sakana-bed"></div></div>
|
||||
<script src="/js/sakana.js"></script>
|
||||
<script>
|
||||
Sakana.setMute(false);
|
||||
Sakana.init({
|
||||
el: '.sakana-box-l',
|
||||
scale: .9,
|
||||
character:'takina',
|
||||
canSwitchCharacter: false,
|
||||
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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -70,6 +70,11 @@
|
||||
<div class="post-list section">
|
||||
|
||||
|
||||
<div class="post">
|
||||
<div class="time">August 6, 2024</div>
|
||||
<a href="https://usj.cc/post/ikun/">添加ikun摆件</a>
|
||||
</div>
|
||||
|
||||
<div class="post">
|
||||
<div class="time">April 5, 2024</div>
|
||||
<a href="https://usj.cc/post/1287/">主机配置单</a>
|
||||
@@ -90,11 +95,6 @@
|
||||
<a href="https://usj.cc/post/1243/">家乡随拍</a>
|
||||
</div>
|
||||
|
||||
<div class="post">
|
||||
<div class="time">July 16, 2023</div>
|
||||
<a href="https://usj.cc/post/1223/">襄阳唐城</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<ul class="pagination">
|
||||
|
||||
@@ -70,6 +70,11 @@
|
||||
<div class="post-list section">
|
||||
|
||||
|
||||
<div class="post">
|
||||
<div class="time">July 16, 2023</div>
|
||||
<a href="https://usj.cc/post/1223/">襄阳唐城</a>
|
||||
</div>
|
||||
|
||||
<div class="post">
|
||||
<div class="time">April 23, 2023</div>
|
||||
<a href="https://usj.cc/post/1142/">苏州一日游</a>
|
||||
@@ -90,11 +95,6 @@
|
||||
<a href="https://usj.cc/post/92/">记录篇：将笔记本联想小新pro13网卡由螃蟹网卡换成AX210网卡</a>
|
||||
</div>
|
||||
|
||||
<div class="post">
|
||||
<div class="time">August 22, 2022</div>
|
||||
<a href="https://usj.cc/post/87/">生活篇：温馨提示假期余额不足，浅浅总结一下这个暑假</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<ul class="pagination">
|
||||
|
||||
@@ -70,6 +70,11 @@
|
||||
<div class="post-list section">
|
||||
|
||||
|
||||
<div class="post">
|
||||
<div class="time">August 22, 2022</div>
|
||||
<a href="https://usj.cc/post/87/">生活篇：温馨提示假期余额不足，浅浅总结一下这个暑假</a>
|
||||
</div>
|
||||
|
||||
<div class="post">
|
||||
<div class="time">June 29, 2022</div>
|
||||
<a href="https://usj.cc/post/85/">生活篇:离校，暑假，租房，面试，致那些日子的琐碎事</a>
|
||||
@@ -90,11 +95,6 @@
|
||||
<a href="https://usj.cc/post/74/">2022，致我的春节回忆录</a>
|
||||
</div>
|
||||
|
||||
<div class="post">
|
||||
<div class="time">December 22, 2021</div>
|
||||
<a href="https://usj.cc/post/40/">放假之前最后一次的照片合集，再见啦！理工</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<ul class="pagination">
|
||||
|
||||
@@ -70,6 +70,11 @@
|
||||
<div class="post-list section">
|
||||
|
||||
|
||||
<div class="post">
|
||||
<div class="time">December 22, 2021</div>
|
||||
<a href="https://usj.cc/post/40/">放假之前最后一次的照片合集，再见啦！理工</a>
|
||||
</div>
|
||||
|
||||
<div class="post">
|
||||
<div class="time">November 9, 2021</div>
|
||||
<a href="https://usj.cc/post/25/">第一次尝试ai画简笔画，本是给自己设计logo误打误撞画起了简笔画</a>
|
||||
@@ -90,11 +95,6 @@
|
||||
<a href="https://usj.cc/post/11/">我想，这是一个我人生中最特殊的中秋国庆节</a>
|
||||
</div>
|
||||
|
||||
<div class="post">
|
||||
<div class="time">September 4, 2021</div>
|
||||
<a href="https://usj.cc/post/4/">2021暑假总结，记录一下这个充实的暑假</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<ul class="pagination">
|
||||
|
||||
@@ -70,6 +70,11 @@
|
||||
<div class="post-list section">
|
||||
|
||||
|
||||
<div class="post">
|
||||
<div class="time">September 4, 2021</div>
|
||||
<a href="https://usj.cc/post/4/">2021暑假总结，记录一下这个充实的暑假</a>
|
||||
</div>
|
||||
|
||||
<div class="post">
|
||||
<div class="time">August 31, 2021</div>
|
||||
<a href="https://usj.cc/post/1/">无悔</a>
|
||||
@@ -90,11 +95,6 @@
|
||||
<a href="https://usj.cc/post/69/">再次投资科目二，科目二花了400，希望19号一把过吧</a>
|
||||
</div>
|
||||
|
||||
<div class="post">
|
||||
<div class="time">May 16, 2021</div>
|
||||
<a href="https://usj.cc/post/45/">双休日襄阳游记，与朋友一起，终究还是遗憾而归</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<ul class="pagination">
|
||||
|
||||
@@ -70,6 +70,11 @@
|
||||
<div class="post-list section">
|
||||
|
||||
|
||||
<div class="post">
|
||||
<div class="time">May 16, 2021</div>
|
||||
<a href="https://usj.cc/post/45/">双休日襄阳游记，与朋友一起，终究还是遗憾而归</a>
|
||||
</div>
|
||||
|
||||
<div class="post">
|
||||
<div class="time">March 19, 2021</div>
|
||||
<a href="https://usj.cc/post/65/">这几天都频繁下雨，上课路上被浇成成落汤鸡</a>
|
||||
@@ -90,11 +95,6 @@
|
||||
<a href="https://usj.cc/post/60/">祝母校越办越好</a>
|
||||
</div>
|
||||
|
||||
<div class="post">
|
||||
<div class="time">December 27, 2020</div>
|
||||
<a href="https://usj.cc/post/57/">期末倒计时开始</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<ul class="pagination">
|
||||
|
||||
@@ -70,6 +70,11 @@
|
||||
<div class="post-list section">
|
||||
|
||||
|
||||
<div class="post">
|
||||
<div class="time">December 27, 2020</div>
|
||||
<a href="https://usj.cc/post/57/">期末倒计时开始</a>
|
||||
</div>
|
||||
|
||||
<div class="post">
|
||||
<div class="time">December 22, 2020</div>
|
||||
<a href="https://usj.cc/post/54/">今年的第一场雪</a>
|
||||
@@ -90,11 +95,6 @@
|
||||
<a href="https://usj.cc/post/51/">双节快乐！家与国撞了个满怀</a>
|
||||
</div>
|
||||
|
||||
<div class="post">
|
||||
<div class="time">July 7, 2020</div>
|
||||
<a href="https://usj.cc/post/50/">高考加油，相信自己</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</article>
|
||||
<ul class="pagination">
|
||||
|
||||
@@ -70,6 +70,11 @@
|
||||
<div class="post-list section">
|
||||
|
||||
|
||||
<div class="post">
|
||||
<div class="time">July 7, 2020</div>
|
||||
<a href="https://usj.cc/post/50/">高考加油，相信自己</a>
|
||||
</div>
|
||||
|
||||
<div class="post">
|
||||
<div class="time">July 3, 2020</div>
|
||||
<a href="https://usj.cc/post/49/">高考即将来临，老师为我们加油打气</a>
|
||||
|
||||
+147
-1
@@ -6,7 +6,153 @@
|
||||
<description></description>
|
||||
<generator>Hugo -- gohugo.io</generator>
|
||||
<language>zh-cn</language>
|
||||
<lastBuildDate>Sun, 02 Jun 2024 11:36:00 +0000</lastBuildDate><atom:link href="https://usj.cc/post/rss.xml" rel="self" type="application/rss+xml" />
|
||||
<lastBuildDate>Tue, 06 Aug 2024 22:07:54 +0800</lastBuildDate><atom:link href="https://usj.cc/post/rss.xml" rel="self" type="application/rss+xml" />
|
||||
<item>
|
||||
<title>添加ikun摆件</title>
|
||||
<link>https://usj.cc/post/ikun/</link>
|
||||
<pubDate>Tue, 06 Aug 2024 22:07:54 +0800</pubDate>
|
||||
|
||||
<guid>https://usj.cc/post/ikun/</guid>
|
||||
<description>近日，在浏览GitHub时，首页推送了一个这样的项目，无意点进去，试玩了一下 还是很有意思的，按住人物的立牌拖拽、松手后立牌会向反方向弹跳，还</description>
|
||||
|
||||
<content:encoded><![CDATA[<img loading="lazy" decoding="async" src="/" alt="添加ikun摆件" /><p>近日，在浏览GitHub时，首页推送了一个这样的项目，无意点进去，试玩了一下</p>
|
||||
<p>还是很有意思的，按住人物的立牌拖拽、松手后立牌会向反方向弹跳，还有惯性力效果</p>
|
||||
<p>主要是还自带音效，在适当区间松手时还会触发语音效果</p>
|
||||
<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>因为主题是单栏风格，内容的两边有很多留白，所以思来想去，决定把这个摆件整合进来</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>
|
||||
<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>}
|
||||
</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></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></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></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></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></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></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></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></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></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></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></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></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>
|
||||
</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>
|
||||
</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>>
|
||||
</span></span></code></pre></div><p>大功告成！</p>
|
||||
]]></content:encoded>
|
||||
</item>
|
||||
|
||||
<item>
|
||||
<title>主机配置单</title>
|
||||
<link>https://usj.cc/post/1287/</link>
|
||||
|
||||
Reference in new issue
Block a user