live2dmesh渲染优先级_网页添加 Live2D 看板娘

没错我也加上了，好萌啊  ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

最近无意中又看到了 @Jad 大佬的博客，不拖坑了，加加加 233

在 dalao 的 waifu-tips.js 的基础上，实现了套 API，加上了以下功能

可以切换 Live2D 模型了(暂时只有 Pio 和 Tia 酱

支持 随机换装 和 顺序换装(收集了截至目前的 Pio、Tia 全套服装

*需要根据 自身情况 进行定制，不能直接套用(其他资源文件见 打包下载

** waifu-tips.js 的详细设置说明，和 waifu-tips.json 节点说明，见 GitHub - fghrsh/live2d_demo ReadMe

waifu.css.waifu {

position: fixed;

bottom: 0;

z-index: 1;

font-size: 0;

-webkit-transform: translateY(3px);

transform: translateY(3px);

}

.waifu:hover {

-webkit-transform: translateY(0);

transform: translateY(0);

}

.waifu-tips {

opacity: 0;

margin: -20px 20px;

padding: 5px 10px;

border: 1px solid rgba(224, 186, 140, 0.62);

border-radius: 12px;

background-color: rgba(236, 217, 188, 0.5);

box-shadow: 0 3px 15px 2px rgba(191, 158, 118, 0.2);

text-overflow: ellipsis;

overflow: hidden;

position: absolute;

animation-delay: 5s;

animation-duration: 50s;

animation-iteration-count: infinite;

animation-name: shake;

animation-timing-function: ease-in-out;

}

.waifu-tool {

display: none;

color: #aaa;

top: 50px;

right: 10px;

position: absolute;

}

.waifu:hover .waifu-tool {

display: block;

}

.waifu-tool span {

display: block;

cursor: pointer;

color: #5b6c7d;

transition: 0.2s;

}

.waifu-tool span:hover {

color: #34495e;

}

.waifu #live2d{

position: relative;

}

@keyframes shake {

2% {

transform: translate(0.5px, -1.5px) rotate(-0.5deg);

}

4% {

transform: translate(0.5px, 1.5px) rotate(1.5deg);

}

6% {

transform: translate(1.5px, 1.5px) rotate(1.5deg);

}

8% {

transform: translate(2.5px, 1.5px) rotate(0.5deg);

}

10% {

transform: translate(0.5px, 2.5px) rotate(0.5deg);

}

12% {

transform: translate(1.5px, 1.5px) rotate(0.5deg);

}

14% {

transform: translate(0.5px, 0.5px) rotate(0.5deg);

}

16% {

transform: translate(-1.5px, -0.5px) rotate(1.5deg);

}

18% {

transform: translate(0.5px, 0.5px) rotate(1.5deg);

}

20% {

transform: translate(2.5px, 2.5px) rotate(1.5deg);

}

22% {

transform: translate(0.5px, -1.5px) rotate(1.5deg);

}

24% {

transform: translate(-1.5px, 1.5px) rotate(-0.5deg);

}

26% {

transform: translate(1.5px, 0.5px) rotate(1.5deg);

}

28% {

transform: translate(-0.5px, -0.5px) rotate(-0.5deg);

}

30% {

transform: translate(1.5px, -0.5px) rotate(-0.5deg);

}

32% {

transform: translate(2.5px, -1.5px) rotate(1.5deg);

}

34% {

transform: translate(2.5px, 2.5px) rotate(-0.5deg);

}

36% {

transform: translate(0.5px, -1.5px) rotate(0.5deg);

}

38% {

transform: translate(2.5px, -0.5px) rotate(-0.5deg);

}

40% {

transform: translate(-0.5px, 2.5px) rotate(0.5deg);

}

42% {

transform: translate(-1.5px, 2.5px) rotate(0.5deg);

}

44% {

transform: translate(-1.5px, 1.5px) rotate(0.5deg);

}

46% {

transform: translate(1.5px, -0.5px) rotate(-0.5deg);

}

48% {

transform: translate(2.5px, -0.5px) rotate(0.5deg);

}

50% {

transform: translate(-1.5px, 1.5px) rotate(0.5deg);

}

52% {

transform: translate(-0.5px, 1.5px) rotate(0.5deg);

}

54% {

transform: translate(-1.5px, 1.5px) rotate(0.5deg);

}

56% {

transform: translate(0.5px, 2.5px) rotate(1.5deg);

}

58% {

transform: translate(2.5px, 2.5px) rotate(0.5deg);

}

60% {

transform: translate(2.5px, -1.5px) rotate(1.5deg);

}

62% {

transform: translate(-1.5px, 0.5px) rotate(1.5deg);

}

64% {

transform: translate(-1.5px, 1.5px) rotate(1.5deg);

}

66% {

transform: translate(0.5px, 2.5px) rotate(1.5deg);

}

68% {

transform: translate(2.5px, -1.5px) rotate(1.5deg);

}

70% {

transform: translate(2.5px, 2.5px) rotate(0.5deg);

}

72% {

transform: translate(-0.5px, -1.5px) rotate(1.5deg);

}

74% {

transform: translate(-1.5px, 2.5px) rotate(1.5deg);

}

76% {

transform: translate(-1.5px, 2.5px) rotate(1.5deg);

}

78% {

transform: translate(-1.5px, 2.5px) rotate(0.5deg);

}

80% {

transform: translate(-1.5px, 0.5px) rotate(-0.5deg);

}

82% {

transform: translate(-1.5px, 0.5px) rotate(-0.5deg);

}

84% {

transform: translate(-0.5px, 0.5px) rotate(1.5deg);

}

86% {

transform: translate(2.5px, 1.5px) rotate(0.5deg);

}

88% {

transform: translate(-1.5px, 0.5px) rotate(1.5deg);

}

90% {

transform: translate(-1.5px, -0.5px) rotate(-0.5deg);

}

92% {

transform: translate(-1.5px, -1.5px) rotate(1.5deg);

}

94% {

transform: translate(0.5px, 0.5px) rotate(-0.5deg);

}

96% {

transform: translate(2.5px, -0.5px) rotate(-0.5deg);

}

98% {

transform: translate(-1.5px, -1.5px) rotate(-0.5deg);

}

0%, 100% {

transform: translate(0, 0) rotate(0);

}

}

@font-face {

font-family: 'Flat-UI-Icons';

src: url('flat-ui-icons-regular.eot');

src: url('flat-ui-icons-regular.eot?#iefix') format('embedded-opentype'), url('flat-ui-icons-regular.woff') format('woff'), url('flat-ui-icons-regular.ttf') format('truetype'), url('flat-ui-icons-regular.svg#flat-ui-icons-regular') format('svg');

}

[class^="fui-"],

[class*="fui-"] {

font-family: 'Flat-UI-Icons';

speak: none;

font-style: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.fui-cross:before {

content: "\e609";

}

.fui-info-circle:before {

content: "\e60f";

}

.fui-photo:before {

content: "\e62a";

}

.fui-eye:before {

content: "\e62c";

}

.fui-chat:before {

content: "\e62d";

}

.fui-home:before {

content: "\e62e";

}

.fui-user:before {

content: "\e631";

}

waifu-tips.jswindow.live2d_settings = Array(); /*

く__,.ヘヽ.　　　　/　,ー､ 〉

＼ ', !-─‐-i　/　/´

／｀ｰ'　　　 L/／｀ヽ､            Live2D 看板娘 参数设置

/　 ／,　 /|　 ,　 ,　　　 ',                                           Version 1.4.2

ｲ 　/ /-‐/　ｉ　L_ ﾊ ヽ!　 i                            Update 2018.11.12

ﾚ ﾍ 7ｲ｀ﾄ　 ﾚ'ｧ-ﾄ､!ハ|　 |

!,/7 '0'　　 ´0iソ| 　 |

|.从"　　_　　 ,,,, / |./ 　 |             网页添加 Live2D 看板娘

ﾚ'| i＞.､,,__　_,.イ / 　.i 　|                    https://www.fghrsh.net/post/123.html

ﾚ'| | / k_７_/ﾚ'ヽ,　ﾊ.　|

| |/i 〈|/　 i　,.ﾍ |　i　|    Thanks

.|/ /　ｉ： 　 ﾍ!