305 lines
43 KiB
HTML
305 lines
43 KiB
HTML
<!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/Artalk.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,span; cls: uk-animation-slide-bottom-small; delay: 0">
|
|
<p>近日,在浏览GitHub时,首页推送了一个这样的项目,无意点进去,试玩了一下</p>
|
|
<p>还是很有意思的,按住人物的立牌拖拽、松手后立牌会向反方向弹跳,还有惯性力效果</p>
|
|
<p>主要是还自带音效,在适当区间松手时还会触发语音效果</p>
|
|
<p>
|
|
<a
|
|
|
|
href="/tiaozhuan/index.html?target=aHR0cHM6Ly9naXRodWIuY29tL2l0b3JyL3Nha2FuYQ%3d%3d"
|
|
|
|
target="_blank"
|
|
>
|
|
https://github.com/itorr/sakana</a> 「Sakana!」石蒜模拟器</p>
|
|
<p>预览地址:https://lab.magiconch.com/sakana</p>
|
|
<h2 id="继续整活">继续整活</h2>
|
|
<p>因为主题是单栏风格,内容的两边有很多留白,所以思来想去,决定把这个摆件整合进来</p>
|
|
<p>作为一个合格的ikun,当然也少不了整活,于是研究一下源码,修改源码,一气呵成</p>
|
|
<p>为了方便维护,将语音包进行base64转码,于是乎就实现了以下效果,鼠标拖拽,适当角度就会触发语音包</p>
|
|
<p>
|
|
<img data-lazy-src="/pics/hugo/ikun/image-20240807153134059.png" alt="image-20240807153134059" class="lazyload"></p>
|
|
<h4 id="快速食用">快速食用</h4>
|
|
<p>考虑到很多小伙伴也需要,这里把代码梳理一下 发出来</p>
|
|
<p>将以下css加入主题的<!-- raw HTML omitted --><!-- raw HTML omitted -->标签的<!-- raw HTML omitted --><!-- raw HTML omitted -->标签里</p>
|
|
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span> <span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">rem</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">555</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">media</span> <span style="color:#ce5c00;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">max-width</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">650px</span><span style="color:#ce5c00;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">media</span> <span style="color:#ce5c00;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">max-width</span><span style="color:#ce5c00;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">1120px</span><span style="color:#ce5c00;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">translateY</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#204a87">scale</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">0.25</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-l</span> <span style="color:#000;font-weight:bold">{</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">rem</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box-r</span> <span style="color:#000;font-weight:bold">{</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000">inset</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span> <span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#0000cf;font-weight:bold">-1</span><span style="color:#204a87;font-weight:bold">rem</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">{</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">500</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">800</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">100</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#204a87;font-weight:bold">canvas</span> <span style="color:#000;font-weight:bold">{</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">bottom</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-character</span> <span style="color:#000;font-weight:bold">{</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">300</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">300</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">bottom</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">260</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">cursor</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">pointer</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">400</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">no-repeat</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-size</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">cover</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-character</span><span style="color:#ce5c00;font-weight:bold">[</span><span style="color:#204a87;font-weight:bold">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#204a87;font-weight:bold">chisato</span><span style="color:#ce5c00;font-weight:bold">]</span> <span style="color:#000;font-weight:bold">{</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-image</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">url</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">这里填写自定义摆件图片url</span><span style="color:#000;font-weight:bold">)</span><span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-character</span><span style="color:#ce5c00;font-weight:bold">[</span><span style="color:#204a87;font-weight:bold">data-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#204a87;font-weight:bold">takina</span><span style="color:#ce5c00;font-weight:bold">]</span> <span style="color:#000;font-weight:bold">{</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-image</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">url</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">这里填写自定义摆件图片url</span><span style="color:#000;font-weight:bold">)</span><span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-bed</span> <span style="color:#000;font-weight:bold">{</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">160</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">bottom</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">255</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">255</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">255</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.5</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#204a87;font-weight:bold">no-repeat</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">cursor</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">pointer</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-image</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">url</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAAnRSTlMAM8lDrC4AAAE2SURBVEjH7dVBjsMwCAVQiyUnGXG0OQXqsqdgif4pJ8YkTh1bnWqkWVRlkVR+BiHiJuUT7x3sKxGsBNBXhQBbiazF58LglXgTnwmi6EToqfBc2IvoKAWat/8Qu0g2JUYoV7EXhf4iD48JiFGKDkIAvA15EMEWmuXFuxAQSbuI9ZSIFEYXAMaAQpvAejGtC9aEugg8Mh1AxbieD7pAANi5HFqTnNLL0X4P0VYk92rKfZP4oSVlb/7uuWVvzZ/LDYPYSmD5nznG4ycR2FwI8BAbhQFUER9F4pGm9JbkkDqOQeAEY+QIu3gtGFJibt+7bCvQIiaeU4YeoiHYhB+EmtxgOZiTWJV7LHyl9ENVL8fO89l1AvwqjAi7SmmiF8kkn761o9hUOFOuUsh+9Q2w14WXQlo+8Z7xAxPfAJiIc7LIAAAAAElFTkSuQmCC</span><span style="color:#000;font-weight:bold">);</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background-size</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">box-shadow</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.05</span><span style="color:#000;font-weight:bold">);</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
|
</span></span><span style="display:flex;"><span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-box</span><span style="color:#ce5c00;font-weight:bold">[</span><span style="color:#204a87;font-weight:bold">data-can-switch-character</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#204a87;font-weight:bold">true</span><span style="color:#ce5c00;font-weight:bold">]</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">sakana-bed</span> <span style="color:#000;font-weight:bold">{</span>
|
|
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">auto</span><span style="color:#000;font-weight:bold">;</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold">}</span>
|
|
</span></span></code></pre></div><p>在footer底部引入js</p>
|
|
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</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="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="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>
|
|
<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 href="/css/Artalk.css" rel="stylesheet" />
|
|
|
|
<div id="Comments" uk-scrollspy="target: div,span,img> ; cls: uk-animation-slide-bottom-small;"></div>
|
|
|
|
<script src="/js/Artalk.js"></script>
|
|
<script>
|
|
Artalk.init({
|
|
el: '#Comments',
|
|
server: 'https://artalk.5b2.cn',
|
|
site: '优世界',
|
|
flatMode: true
|
|
})
|
|
</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/tiaozhuan.js"></script>
|
|
<script src="/js/Artalk.js"></script>
|
|
<script async src="/js/bsz.js"></script>
|
|
</body>
|
|
|
|
</html>
|
|
|