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,217 @@
|
||||
---
|
||||
title: "添加ikun摆件"
|
||||
date: "2024-08-06T22:07:54+08:00"
|
||||
draft: false
|
||||
categories: []
|
||||
tags: []
|
||||
author: "小赵同学"
|
||||
layout: "post"
|
||||
status: "public"
|
||||
categories: ["生活"]
|
||||
tags: []
|
||||
---
|
||||
|
||||
|
||||
|
||||
近日，在浏览GitHub时，首页推送了一个这样的项目，无意点进去，试玩了一下
|
||||
|
||||
|
||||
|
||||
还是很有意思的，按住人物的立牌拖拽、松手后立牌会向反方向弹跳，还有惯性力效果
|
||||
|
||||
|
||||
|
||||
主要是还自带音效，在适当区间松手时还会触发语音效果
|
||||
|
||||
|
||||
|
||||
```html
|
||||
https://github.com/itorr/sakana 「Sakana!」石蒜模拟器
|
||||
|
||||
预览地址：https://lab.magiconch.com/sakana
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### 继续整活
|
||||
|
||||
|
||||
|
||||
因为主题是单栏风格，内容的两边有很多留白，所以思来想去，决定把这个摆件整合进来
|
||||
|
||||
|
||||
|
||||
作为一个合格的ikun，当然也少不了整活，于是研究一下源码，修改源码，一气呵成
|
||||
|
||||
|
||||
|
||||
为了方便维护，将语音包进行base64转码，于是乎就实现了以下效果，鼠标拖拽，适当角度就会触发语音包
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 快速食用
|
||||
|
||||
|
||||
|
||||
考虑到很多小伙伴也需要，这里把代码梳理一下 发出来
|
||||
|
||||
|
||||
|
||||
将以下css加入主题的<head></head>标签的<style></style>标签里
|
||||
|
||||
|
||||
|
||||
```css
|
||||
.sakana-box-l,
|
||||
.sakana-box-r {
|
||||
position: fixed !important;
|
||||
inset: auto auto -1rem -5rem;
|
||||
z-index: 555;
|
||||
}
|
||||
|
||||
.sakana-box-r {
|
||||
inset: auto -5rem -1rem auto;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
.sakana-box-l,
|
||||
.sakana-box-r {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
.sakana-box-l,
|
||||
.sakana-box-r {
|
||||
transform: translateY(0px) scale(0.25) !important;
|
||||
}
|
||||
|
||||
.sakana-box-l {
|
||||
inset: auto auto -1rem -10rem;
|
||||
}
|
||||
|
||||
.sakana-box-r {
|
||||
inset: auto -10rem -1rem auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sakana-box {
|
||||
width: 500px;
|
||||
height: 800px;
|
||||
position: relative;
|
||||
transform-origin: 50% 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sakana-box canvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sakana-box .sakana-character {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
bottom: 260px;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
transform-origin: 50% 400px;
|
||||
background: no-repeat 50% 50%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.sakana-box .sakana-character[data-character=chisato] {
|
||||
background-image: url(这里填写自定义摆件图片url)!important;
|
||||
}
|
||||
|
||||
.sakana-box .sakana-character[data-character=takina] {
|
||||
background-image: url(这里填写自定义摆件图片url)!important;
|
||||
}
|
||||
|
||||
.sakana-box .sakana-bed {
|
||||
width: 160px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, .5) no-repeat 50% 50%;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUAAAAAAAAAAACDY+nAAAAAAnRSTlMAM8lDrC4AAAE2SURBVEjH7dVBjsMwCAVQiyUnGXG0OQXqsqdgif4pJ8YkTh1bnWqkWVRlkVR+BiHiJuUT7x3sKxGsBNBXhQBbiazF58LglXgTnwmi6EToqfBc2IvoKAWat/8Qu0g2JUYoV7EXhf4iD48JiFGKDkIAvA15EMEWmuXFuxAQSbuI9ZSIFEYXAMaAQpvAejGtC9aEugg8Mh1AxbieD7pAANi5HFqTnNLL0X4P0VYk92rKfZP4oSVlb/7uuWVvzZ/LDYPYSmD5nznG4ycR2FwI8BAbhQFUER9F4pGm9JbkkDqOQeAEY+QIu3gtGFJibt+7bCvQIiaeU4YeoiHYhB+EmtxgOZiTWJV7LHyl9ENVL8fO89l1AvwqjAi7SmmiF8kkn761o9hUOFOuUsh+9Q2w14WXQlo+8Z7xAxPfAJiIc7LIAAAAAElFTkSuQmCC);
|
||||
background-size: 20px 20px;
|
||||
box-shadow: 0 0 0 2px rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.sakana-box[data-can-switch-character=true] .sakana-bed {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
在footer底部引入js
|
||||
|
||||
|
||||
|
||||
```js
|
||||
<script src="https://usj.cc/js/sakana.js"></script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
在主题的自定义js进行插件初始化
|
||||
|
||||
|
||||
|
||||
```js
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
在你想展示的位置添加div标签
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
大功告成！
|
||||
Reference in new issue
Block a user