├── .idea ├── bgk_live2d_ai.iml ├── markdown-navigator.xml ├── markdown-navigator │ └── profiles_settings.xml ├── misc.xml ├── modules.xml └── vcs.xml ├── LICENSE ├── README.md ├── assets ├── finger.cur ├── flat-ui-icons-regular.eot ├── flat-ui-icons-regular.svg ├── flat-ui-icons-regular.ttf ├── flat-ui-icons-regular.woff ├── live2d.js ├── waifu-tips.js ├── waifu-tips.json └── waifu.css └── index.html /.idea/bgk_live2d_ai.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.idea/markdown-navigator.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 36 | 37 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /.idea/markdown-navigator/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 2 | Version 2, December 2004 3 | 4 | Copyright (C) 2004 Sam Hocevar 5 | 6 | Everyone is permitted to copy and distribute verbatim or modified 7 | copies of this license document, and changing it is allowed as long 8 | as the name is changed. 9 | 10 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 11 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 12 | 13 | 0. You just DO WHAT THE FUCK YOU WANT TO. 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # 项目简介 4 | 本项目是我git服务器[Alpaca Bi的代码库](https://git.alpaca.run)右下角小人的源代码，基于live2d.js开发，我单独把她抽离了出来，你们可以嵌入到你们自己的网站里，演示demo地址如下：https://live2d.alpaca.run 5 | 6 | # 安装与使用方法 7 | 8 | ### 关于聊天功能和图片识别功能 9 | 如果你不想加入聊天功能和图片识别功能，只是想单纯的加入个小人，可以跳过此步骤直接看下面安装教程，如果想，请往下看，巴拉巴拉巴拉巴拉（有空再更新） 10 | 11 | 12 | ### 安装过程 13 | 1. 直接把本项目下载下来 14 | 2. 下载完成后，复制`assets`文件夹，到你的项目跟目录下 15 | 3. 之后嵌入如下代码在你的index.html的body标签里面，放在最后body标签最后 16 | ```html 17 | 18 | 19 | 22 |

23 |

24 |

25 |

26 | 27 | 28 | 29 | ``` 30 | 4. 当然了也别忘记在你的index.html的head标签里，加入以下代码 31 | 32 | ```html 33 | 34 | 35 | 36 | ``` 37 | 38 | ### 自定义交互功能 39 | 她可以监听到你的鼠标移动到或者点击某个元素，并给出相应的反应，实现这个功能你可以去`assets/waifu-tips.json`文件里配置，很简单的你一看demo源码就秒懂了 -------------------------------------------------------------------------------- /assets/finger.cur: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlpacaBi/live2d_ai/3dabcfa9fa3e9a5c0f7a3854fb8f9d308b42c65a/assets/finger.cur -------------------------------------------------------------------------------- /assets/flat-ui-icons-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlpacaBi/live2d_ai/3dabcfa9fa3e9a5c0f7a3854fb8f9d308b42c65a/assets/flat-ui-icons-regular.eot -------------------------------------------------------------------------------- /assets/flat-ui-icons-regular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /assets/flat-ui-icons-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlpacaBi/live2d_ai/3dabcfa9fa3e9a5c0f7a3854fb8f9d308b42c65a/assets/flat-ui-icons-regular.ttf -------------------------------------------------------------------------------- /assets/flat-ui-icons-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AlpacaBi/live2d_ai/3dabcfa9fa3e9a5c0f7a3854fb8f9d308b42c65a/assets/flat-ui-icons-regular.woff -------------------------------------------------------------------------------- /assets/waifu-tips.js: -------------------------------------------------------------------------------- 1 | $('input[type="file"]').on('change',doUpload); 2 | function doUpload() { 3 | var file = this.files[0]; 4 | if (!/image\/\w+/.test(file.type)) { 5 | alert("请选择图片!!!!"); 6 | return false; 7 | } 8 | var formData = new FormData($("#uploadForm")[0]) 9 | $.ajax({ 10 | url: '/ai/pic', 11 | type: 'POST', 12 | data: formData, 13 | dataType: 'json', 14 | async: false, 15 | cache: false, 16 | contentType: false, 17 | processData: false, 18 | success: function (data) { 19 | var result='--------------------
审查检测:
' 20 | if (data['conclusionType']==1){ 21 | result=result+'无黄色图片或违规图片
' 22 | }else{ 23 | data["data"].map(function(item,index){ 24 | if(item['type']==8 || item['type']==11){ 25 | result=result+item["msg"]+":"+item["stars"][0]["name"]+'
' 26 | } 27 | else{ 28 | result=result+item["msg"]+'
' 29 | } 30 | }) 31 | } 32 | result=result+'--------------------
' 33 | console.log(result) 34 | showMessage(result, 8000); 35 | }, 36 | error: function (data) { 37 | alert("fail") 38 | } 39 | }) 40 | } 41 | //******************************************************** 42 | function add() { 43 | var text = document.getElementById("talk").value; 44 | 45 | if(text.length>0){ 46 | $.ajax({ 47 | url: "/chat",//接口地址 48 | type: "post", 49 | dataType: "json", 50 | data: { 51 | key: "03ad06ed6ea3409088755f3b60740227",//APIKey 52 | info: text//用户文本 53 | }, 54 | success: function (data, status) { 55 | if (data.code == "100000") {//成功 56 | showMessage(data.text, 6000); 57 | } 58 | 59 | if (data.code == "40004") { 60 | showMessage("不好意思，当天聊天次数已用完！！", 6000); 61 | } 62 | }, 63 | error:function(){ 64 | showMessage("无法接收请求，网络出现问题", 6000); 65 | } 66 | }); 67 | } 68 | else{showMessage("你貌似、忘记输入了吧", 6000);} 69 | document.getElementById("talk").value = ''; 70 | } 71 | 72 | $('#talk').keydown(function(event) { 73 | 74 | if (event.keyCode == 13) { 75 | add(); 76 | } 77 | }); 78 | //************************************************************************ 79 | 80 | var a_idx = 0; 81 | jQuery(document).ready(function($) { 82 | $("body").click(function(e) { 83 | var a = new Array("+1s", "+1s", "+1s", "+1s", "+1s", "+1s", "+1s" ,"+1s", "+1s", "+1s", "+1s", "+1s"); 84 | var $i = $("").text(a[a_idx]); 85 | a_idx = (a_idx + 1) % a.length; 86 | var x = e.pageX, 87 | y = e.pageY; 88 | $i.css({ 89 | "z-index": 99999999999999999999, 90 | "top": y - 20, 91 | "left": x, 92 | "position": "absolute", 93 | "font-weight": "bold", 94 | "color": "#ff6651" 95 | }); 96 | $("body").append($i); 97 | $i.animate({ 98 | "top": y - 180, 99 | "opacity": 0 100 | }, 101 | 1500, 102 | function() { 103 | $i.remove(); 104 | }); 105 | }); 106 | }); 107 | 108 | 109 | 110 | 111 | String.prototype.render = function (context) { 112 | var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g; 113 | 114 | return this.replace(tokenReg, function (word, slash1, token, slash2) { 115 | if (slash1 || slash2) { 116 | return word.replace('\\', ''); 117 | } 118 | 119 | var variables = token.replace(/\s/g, '').split('.'); 120 | var currentObject = context; 121 | var i, length, variable; 122 | 123 | for (i = 0, length = variables.length; i < length; ++i) { 124 | variable = variables[i]; 125 | currentObject = currentObject[variable]; 126 | if (currentObject === undefined || currentObject === null) return ''; 127 | } 128 | return currentObject; 129 | }); 130 | }; 131 | 132 | var re = /x/; 133 | console.log(re); 134 | re.toString = function() { 135 | showMessage('很好，你打开了控制台，代码被压缩打包过的，没法直接复制拿来用，可以去我github下载,顺便给我star一下是最吼的，给我follow那更是exciting', 5000, true); 136 | return ''; 137 | }; 138 | 139 | $(document).on('copy', function (){ 140 | showMessage('我看见你复制了,恩恩，熟练使用ctrl+c是程序员必备技能', 5000, true); 141 | }); 142 | 143 | $('.waifu-tool .fui-home').click(function (){ 144 | //window.location = 'https://www.fghrsh.net/'; 145 | window.location = window.location.protocol+'//'+window.location.hostname+'/' 146 | }); 147 | 148 | $('.waifu-tool .fui-eye').click(function (){ 149 | loadOtherModel(); 150 | }); 151 | 152 | $('.waifu-tool .fui-chat').click(function (){ 153 | showHitokoto(); 154 | }); 155 | 156 | $('.waifu-tool .fui-user').click(function (){ 157 | loadRandModel(); 158 | }); 159 | 160 | $('.waifu-tool .fui-info-circle').click(function (){ 161 | //window.open('https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02'); 162 | window.open('https://www.fghrsh.net/post/123.html'); 163 | }); 164 | 165 | $('.waifu-tool .fui-cross').click(function (){ 166 | sessionStorage.setItem('waifu-dsiplay', 'none'); 167 | showMessage('再见，死变态！！！', 1300, true); 168 | window.setTimeout(function() {$('.waifu').hide();}, 1300); 169 | }); 170 | 171 | $('.waifu-tool .fui-photo').click(function (){ 172 | showMessage('偷偷下载我照片想干嘛？？？', 5000, true); 173 | window.Live2D.captureName = 'Pio.png'; 174 | window.Live2D.captureFrame = true; 175 | }); 176 | 177 | (function (){ 178 | var text; 179 | //var SiteIndexUrl = 'https://www.fghrsh.net/'; // 手动指定主页 180 | var SiteIndexUrl = window.location.protocol+'//'+window.location.hostname+'/'; // 自动获取主页 181 | 182 | if (window.location.href == SiteIndexUrl) { // 如果是主页 183 | var now = (new Date()).getHours(); 184 | if (now > 23 || now <= 5) { 185 | text = '凌晨熬夜容易猝死'; 186 | } else if (now > 5 && now <= 8) { 187 | text = '早上好，小心，起这么早容易猝死'; 188 | } else if (now > 8 && now <= 12) { 189 | text = '现在应该是上午上班时间，你这是在上班摸鱼吗'; 190 | } else if (now > 12 && now <= 14) { 191 | text = '中午了，不睡午觉来看我的么，小心猝死'; 192 | } else if (now > 14 && now <= 17) { 193 | text = '下午上班居然摸鱼'; 194 | } else if (now > 17 && now <= 19) { 195 | text = '傍晚了，我猜你没那么早下班'; 196 | } else if (now > 19 && now <= 21) { 197 | text = '晚上好，让我猜，你在加班是不是？？'; 198 | } else if (now > 21 && now <= 23) { 199 | text = '如果这个时候你还在加班，你离猝死不远了'; 200 | } else { 201 | text = '嗨~ 快来逗我玩吧！'; 202 | } 203 | } else { 204 | if(document.referrer !== ''){ 205 | var referrer = document.createElement('a'); 206 | referrer.href = document.referrer; 207 | var domain = referrer.hostname.split('.')[1]; 208 | if (window.location.hostname == referrer.hostname) { 209 | text = '欢迎来到『' + document.title.split(' - ')[0] + '』'; 210 | } else if (domain == 'baidu') { 211 | text = 'Hello! 来自百度搜索的朋友
你是搜索 ' + referrer.search.split('&wd=')[1].split('&')[0] + ' 找到的我吗？'; 212 | } else if (domain == 'so') { 213 | text = 'Hello! 来自 360搜索的朋友
你是搜索 ' + referrer.search.split('&q=')[1].split('&')[0] + ' 找到的我吗？'; 214 | } else if (domain == 'google') { 215 | text = 'Hello! 来自谷歌搜索的朋友
欢迎来到『' + document.title.split(' - ')[0] + '』'; 216 | } else { 217 | text = 'Hello! 来自 ' + referrer.hostname + ' 的朋友'; 218 | } 219 | } else { 220 | text = '欢迎来到『' + document.title.split(' - ')[0] + '』'; 221 | } 222 | } 223 | function p(s) { 224 | return s < 10 ? '0' + s: s; 225 | } 226 | 227 | var myDate = new Date(); 228 | //获取当前年 229 | var year=myDate.getFullYear(); 230 | //获取当前月 231 | var month=myDate.getMonth()+1; 232 | //获取当前日 233 | var date=myDate.getDate(); 234 | var h=myDate.getHours(); //获取当前小时数(0-23) 235 | var m=myDate.getMinutes(); //获取当前分钟数(0-59) 236 | var s=myDate.getSeconds(); 237 | 238 | var now='现在是'+year+'年'+p(month)+"月"+p(date)+"日"+" "+p(h)+'点'+p(m)+'分'; 239 | var msgg=now+','+text; 240 | showMessage(msgg, 6000); 241 | })(); 242 | 243 | //window.hitokotoTimer = window.setInterval(showHitokoto,30000); 244 | /* 检测用户活动状态，并在空闲时定时显示一言 */ 245 | var getActed = false; 246 | window.hitokotoTimer = 0; 247 | var hitokotoInterval = false; 248 | 249 | $(document).mousemove(function(e){getActed = true;}).keydown(function(){getActed = true;}); 250 | setInterval(function() { if (!getActed) ifActed(); else elseActed(); }, 1000); 251 | 252 | function ifActed() { 253 | if (!hitokotoInterval) { 254 | hitokotoInterval = true; 255 | hitokotoTimer = window.setInterval(showHitokoto, 30000); 256 | } 257 | } 258 | 259 | function elseActed() { 260 | getActed = hitokotoInterval = false; 261 | window.clearInterval(hitokotoTimer); 262 | } 263 | 264 | function showHitokoto(){ 265 | /* 增加 hitokoto.cn API */ 266 | //$.getJSON('https://v1.hitokoto.cn',function(result){ 267 | var text = '苟利国家生死以，岂因祸福避趋之'; 268 | //text = text.render({source: result.from, creator: result.creator}); 269 | showMessage(result.hitokoto, 5000); 270 | window.setTimeout(function() {showMessage(text, 3000);}, 5000); 271 | // }); 272 | /* 273 | $.getJSON('https://api.fghrsh.net/hitokoto/rand/?encode=jsc&uid=3335',function(result){ 274 | var text = '这句一言出处是『{source}』，是 FGHRSH 在 {date} 收藏的！'; 275 | text = text.render({source: result.source, date: result.date}); 276 | showMessage(result.hitokoto, 5000); 277 | window.setTimeout(function() {showMessage(text, 3000);}, 5000); 278 | }); 279 | */ 280 | } 281 | 282 | function showMessage(text, timeout, flag){ 283 | if(flag || sessionStorage.getItem('waifu-text') === '' || sessionStorage.getItem('waifu-text') === null){ 284 | if(Array.isArray(text)) text = text[Math.floor(Math.random() * text.length + 1)-1]; 285 | //console.log(text); 286 | 287 | if(flag) sessionStorage.setItem('waifu-text', text); 288 | 289 | $('.waifu-tips').stop(); 290 | $('.waifu-tips').html(text).fadeTo(200, 1); 291 | if (timeout === undefined) timeout = 5000; 292 | hideMessage(timeout); 293 | } 294 | } 295 | 296 | function hideMessage(timeout){ 297 | $('.waifu-tips').stop().css('opacity',1); 298 | if (timeout === undefined) timeout = 5000; 299 | window.setTimeout(function() {sessionStorage.removeItem('waifu-text')}, timeout); 300 | $('.waifu-tips').delay(timeout).fadeTo(200, 0); 301 | } 302 | 303 | function initModel(waifuPath){ 304 | 305 | if (waifuPath === undefined) waifuPath = ''; 306 | var modelId = localStorage.getItem('modelId'); 307 | var modelTexturesId = localStorage.getItem('modelTexturesId'); 308 | 309 | if (modelId == null) { 310 | 311 | /* 首次访问加载指定模型的指定材质 */ 312 | 313 | var modelId = 5; // 模型 ID 314 | var modelTexturesId = 2 // 材质 ID 315 | 316 | } loadModel(modelId, modelTexturesId); 317 | 318 | $.ajax({ 319 | cache: true, 320 | url: waifuPath+'waifu-tips.json', 321 | dataType: "json", 322 | success: function (result){ 323 | $.each(result.mouseover, function (index, tips){ 324 | $(document).on("mouseover", tips.selector, function (){ 325 | var text = tips.text; 326 | if(Array.isArray(tips.text)) text = tips.text[Math.floor(Math.random() * tips.text.length + 1)-1]; 327 | text = text.render({text: $(this).text()}); 328 | showMessage(text, 3000); 329 | }); 330 | }); 331 | $.each(result.click, function (index, tips){ 332 | $(document).on("click", tips.selector, function (){ 333 | var text = tips.text; 334 | if(Array.isArray(tips.text)) text = tips.text[Math.floor(Math.random() * tips.text.length + 1)-1]; 335 | text = text.render({text: $(this).text()}); 336 | showMessage(text, 3000, true); 337 | }); 338 | }); 339 | $.each(result.seasons, function (index, tips){ 340 | var now = new Date(); 341 | var after = tips.date.split('-')[0]; 342 | var before = tips.date.split('-')[1] || after; 343 | 344 | if((after.split('/')[0] <= now.getMonth()+1 && now.getMonth()+1 <= before.split('/')[0]) && 345 | (after.split('/')[1] <= now.getDate() && now.getDate() <= before.split('/')[1])){ 346 | var text = tips.text; 347 | if(Array.isArray(tips.text)) text = tips.text[Math.floor(Math.random() * tips.text.length + 1)-1]; 348 | text = text.render({year: now.getFullYear()}); 349 | showMessage(text, 6000, true); 350 | } 351 | }); 352 | } 353 | }); 354 | } 355 | 356 | function loadModel(modelId, modelTexturesId){ 357 | localStorage.setItem('modelId', modelId); 358 | if (modelTexturesId === undefined) modelTexturesId = 0; 359 | localStorage.setItem('modelTexturesId', modelTexturesId); 360 | loadlive2d('live2d', 'https://live2d.alpaca.run/get/index.php?id='+modelId+'-'+modelTexturesId, console.log('live2d','模型 '+modelId+'-'+modelTexturesId+' 加载完成')); 361 | } 362 | 363 | function loadRandModel(){ 364 | var modelId = localStorage.getItem('modelId'); 365 | var modelTexturesId = localStorage.getItem('modelTexturesId'); 366 | 367 | var modelTexturesRandMode = 'switch'; // 可选 'rand'(随机), 'switch'(顺序) 368 | 369 | $.ajax({ 370 | cache: false, 371 | url: 'https://live2d.alpaca.run/'+modelTexturesRandMode+'_textures/index.php?id='+modelId+'-'+modelTexturesId, 372 | dataType: "json", 373 | success: function (result){ 374 | if (result.textures['id'] == 1 && (modelTexturesId == 1 || modelTexturesId == 0)) { 375 | showMessage('没衣服穿了', 3000, true); 376 | } else { 377 | showMessage('别换了，没有比基尼，滚！！', 3000, true); 378 | } 379 | loadModel(modelId, result.textures['id']); 380 | } 381 | }); 382 | } 383 | 384 | function loadOtherModel(){ 385 | var modelId = localStorage.getItem('modelId'); 386 | 387 | var modelTexturesRandMode = 'switch'; // 可选 'rand'(随机), 'switch'(顺序) 388 | 389 | $.ajax({ 390 | cache: false, 391 | url: 'https://live2d.alpaca.run/'+modelTexturesRandMode+'/index.php?id='+modelId, 392 | dataType: "json", 393 | success: function (result){ 394 | loadModel(result.model['id']); 395 | showMessage(result.model['message'], 3000, true); 396 | } 397 | }); 398 | } -------------------------------------------------------------------------------- /assets/waifu-tips.json: -------------------------------------------------------------------------------- 1 | { 2 | "mouseover": [ 3 | { 4 | "selector": "#hov", 5 | "text": ["噢！！我看到你的鼠标经过那里了"] 6 | } 7 | ], 8 | "click": [ 9 | { 10 | "selector": "#clk", 11 | "text": ["哇！我看到你的鼠标点击那里了"] 12 | } 13 | 14 | ],"seasons": [ 15 | { 16 | "date": "01/01", 17 | "text": "元旦了呢，新的一年又开始了，今年是{year}年~" 18 | }, 19 | { 20 | "date": "02/14", 21 | "text": "又是一年情人节，{year}年找到对象了嘛~" 22 | }, 23 | { 24 | "date": "03/08", 25 | "text": "今天是妇女节！" 26 | }, 27 | { 28 | "date": "03/12", 29 | "text": "今天是植树节，要保护环境呀" 30 | }, 31 | { 32 | "date": "04/01", 33 | "text": "悄悄告诉你一个秘密~今天是愚人节，不要被骗了哦~" 34 | }, 35 | { 36 | "date": "05/01", 37 | "text": "今天是五一劳动节，计划好假期去哪里了吗~" 38 | }, 39 | { 40 | "date": "06/01", 41 | "text": "儿童节了呢，快活的时光总是短暂，要是永远长不大该多好啊…" 42 | }, 43 | { 44 | "date": "09/03", 45 | "text": "中国人民抗日战争胜利纪念日，铭记历史、缅怀先烈、珍爱和平、开创未来。" 46 | }, 47 | { 48 | "date": "09/10", 49 | "text": "教师节，在学校要给老师问声好呀~" 50 | }, 51 | { 52 | "date": "10/01", 53 | "text": "国庆节，新中国已经成立69年了呢" 54 | }, 55 | { 56 | "date": "11/05-11/12", 57 | "text": "今年的双十一是和谁一起过的呢~" 58 | }, 59 | { 60 | "date": "12/20-12/31", 61 | "text": "这几天是圣诞节，主人肯定又去剁手买买买了~" 62 | } 63 | ] 64 | } -------------------------------------------------------------------------------- /assets/waifu.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-position: center 0; 3 | background-size: cover; 4 | padding-top: 65px; 5 | padding-bottom: 65px; 6 | padding-left:0; 7 | overflow-y:scroll; 8 | overflow-x:hidden; 9 | cursor:url(finger.cur),auto; 10 | } 11 | 12 | hr{ 13 | height:1px;border:none;border-top:1px solid black; 14 | } 15 | 16 | #talk{ 17 | position: fixed; 18 | width: 150px ;height:25px; 19 | bottom: 60px; 20 | right: 320px; 21 | z-index: 10001; 22 | transition: all .3s ease-in-out; 23 | -webkit-transform: translateY(3px); 24 | transform: translateY(3px); 25 | } 26 | 27 | #uploadForm{ 28 | position: fixed; 29 | width: 50px ;height:25px; 30 | bottom: 90px; 31 | right: 430px; 32 | z-index: 10001; 33 | transition: all .3s ease-in-out; 34 | -webkit-transform: translateY(3px); 35 | transform: translateY(3px); 36 | } 37 | 38 | .waifu { 39 | position: fixed; 40 | bottom: 0; 41 | right: 0; 42 | z-index: 10000; 43 | font-size: 0; 44 | transition: all .3s ease-in-out; 45 | -webkit-transform: translateY(3px); 46 | transform: translateY(3px); 47 | } 48 | .waifu:hover { 49 | -webkit-transform: translateY(0); 50 | transform: translateY(0); 51 | } 52 | @media (max-width: 768px) { 53 | .waifu { 54 | display: none; 55 | } 56 | } 57 | .waifu-tips { 58 | opacity: 0; 59 | width: 250px; 60 | height: 100px; 61 | margin: -50px 20px; 62 | padding: 10px 10px; 63 | border: 1px solid rgba(224, 186, 140, 0.62); 64 | border-radius: 12px; 65 | background-color: white; 66 | box-shadow: 0 3px 15px 2px rgba(191, 158, 118, 0.2); 67 | font-size: 12px; 68 | text-overflow: ellipsis; 69 | overflow: hidden; 70 | position: absolute; 71 | animation-delay: 5s; 72 | animation-duration: 50s; 73 | animation-iteration-count: infinite; 74 | animation-name: shake; 75 | animation-timing-function: ease-in-out; 76 | } 77 | .waifu-tool { 78 | display: none; 79 | color: #aaa; 80 | top: 50px; 81 | right: 10px; 82 | font-size: 14px; 83 | position: absolute; 84 | } 85 | .waifu:hover .waifu-tool { 86 | display: block; 87 | } 88 | .waifu-tool span { 89 | display: block; 90 | cursor: pointer; 91 | color: #5b6c7d; 92 | line-height: 20px; 93 | transition: 0.2s; 94 | } 95 | .waifu-tool span:hover { 96 | color: #34495e; 97 | } 98 | .waifu #live2d{ 99 | position: relative; 100 | } 101 | 102 | @keyframes shake { 103 | 2% { 104 | transform: translate(0.5px, -1.5px) rotate(-0.5deg); 105 | } 106 | 107 | 4% { 108 | transform: translate(0.5px, 1.5px) rotate(1.5deg); 109 | } 110 | 111 | 6% { 112 | transform: translate(1.5px, 1.5px) rotate(1.5deg); 113 | } 114 | 115 | 8% { 116 | transform: translate(2.5px, 1.5px) rotate(0.5deg); 117 | } 118 | 119 | 10% { 120 | transform: translate(0.5px, 2.5px) rotate(0.5deg); 121 | } 122 | 123 | 12% { 124 | transform: translate(1.5px, 1.5px) rotate(0.5deg); 125 | } 126 | 127 | 14% { 128 | transform: translate(0.5px, 0.5px) rotate(0.5deg); 129 | } 130 | 131 | 16% { 132 | transform: translate(-1.5px, -0.5px) rotate(1.5deg); 133 | } 134 | 135 | 18% { 136 | transform: translate(0.5px, 0.5px) rotate(1.5deg); 137 | } 138 | 139 | 20% { 140 | transform: translate(2.5px, 2.5px) rotate(1.5deg); 141 | } 142 | 143 | 22% { 144 | transform: translate(0.5px, -1.5px) rotate(1.5deg); 145 | } 146 | 147 | 24% { 148 | transform: translate(-1.5px, 1.5px) rotate(-0.5deg); 149 | } 150 | 151 | 26% { 152 | transform: translate(1.5px, 0.5px) rotate(1.5deg); 153 | } 154 | 155 | 28% { 156 | transform: translate(-0.5px, -0.5px) rotate(-0.5deg); 157 | } 158 | 159 | 30% { 160 | transform: translate(1.5px, -0.5px) rotate(-0.5deg); 161 | } 162 | 163 | 32% { 164 | transform: translate(2.5px, -1.5px) rotate(1.5deg); 165 | } 166 | 167 | 34% { 168 | transform: translate(2.5px, 2.5px) rotate(-0.5deg); 169 | } 170 | 171 | 36% { 172 | transform: translate(0.5px, -1.5px) rotate(0.5deg); 173 | } 174 | 175 | 38% { 176 | transform: translate(2.5px, -0.5px) rotate(-0.5deg); 177 | } 178 | 179 | 40% { 180 | transform: translate(-0.5px, 2.5px) rotate(0.5deg); 181 | } 182 | 183 | 42% { 184 | transform: translate(-1.5px, 2.5px) rotate(0.5deg); 185 | } 186 | 187 | 44% { 188 | transform: translate(-1.5px, 1.5px) rotate(0.5deg); 189 | } 190 | 191 | 46% { 192 | transform: translate(1.5px, -0.5px) rotate(-0.5deg); 193 | } 194 | 195 | 48% { 196 | transform: translate(2.5px, -0.5px) rotate(0.5deg); 197 | } 198 | 199 | 50% { 200 | transform: translate(-1.5px, 1.5px) rotate(0.5deg); 201 | } 202 | 203 | 52% { 204 | transform: translate(-0.5px, 1.5px) rotate(0.5deg); 205 | } 206 | 207 | 54% { 208 | transform: translate(-1.5px, 1.5px) rotate(0.5deg); 209 | } 210 | 211 | 56% { 212 | transform: translate(0.5px, 2.5px) rotate(1.5deg); 213 | } 214 | 215 | 58% { 216 | transform: translate(2.5px, 2.5px) rotate(0.5deg); 217 | } 218 | 219 | 60% { 220 | transform: translate(2.5px, -1.5px) rotate(1.5deg); 221 | } 222 | 223 | 62% { 224 | transform: translate(-1.5px, 0.5px) rotate(1.5deg); 225 | } 226 | 227 | 64% { 228 | transform: translate(-1.5px, 1.5px) rotate(1.5deg); 229 | } 230 | 231 | 66% { 232 | transform: translate(0.5px, 2.5px) rotate(1.5deg); 233 | } 234 | 235 | 68% { 236 | transform: translate(2.5px, -1.5px) rotate(1.5deg); 237 | } 238 | 239 | 70% { 240 | transform: translate(2.5px, 2.5px) rotate(0.5deg); 241 | } 242 | 243 | 72% { 244 | transform: translate(-0.5px, -1.5px) rotate(1.5deg); 245 | } 246 | 247 | 74% { 248 | transform: translate(-1.5px, 2.5px) rotate(1.5deg); 249 | } 250 | 251 | 76% { 252 | transform: translate(-1.5px, 2.5px) rotate(1.5deg); 253 | } 254 | 255 | 78% { 256 | transform: translate(-1.5px, 2.5px) rotate(0.5deg); 257 | } 258 | 259 | 80% { 260 | transform: translate(-1.5px, 0.5px) rotate(-0.5deg); 261 | } 262 | 263 | 82% { 264 | transform: translate(-1.5px, 0.5px) rotate(-0.5deg); 265 | } 266 | 267 | 84% { 268 | transform: translate(-0.5px, 0.5px) rotate(1.5deg); 269 | } 270 | 271 | 86% { 272 | transform: translate(2.5px, 1.5px) rotate(0.5deg); 273 | } 274 | 275 | 88% { 276 | transform: translate(-1.5px, 0.5px) rotate(1.5deg); 277 | } 278 | 279 | 90% { 280 | transform: translate(-1.5px, -0.5px) rotate(-0.5deg); 281 | } 282 | 283 | 92% { 284 | transform: translate(-1.5px, -1.5px) rotate(1.5deg); 285 | } 286 | 287 | 94% { 288 | transform: translate(0.5px, 0.5px) rotate(-0.5deg); 289 | } 290 | 291 | 96% { 292 | transform: translate(2.5px, -0.5px) rotate(-0.5deg); 293 | } 294 | 295 | 98% { 296 | transform: translate(-1.5px, -1.5px) rotate(-0.5deg); 297 | } 298 | 299 | 0%, 100% { 300 | transform: translate(0, 0) rotate(0); 301 | } 302 | } 303 | @font-face { 304 | font-family: 'Flat-UI-Icons'; 305 | src: url('flat-ui-icons-regular.eot'); 306 | 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'); 307 | } 308 | [class^="fui-"], 309 | [class*="fui-"] { 310 | font-family: 'Flat-UI-Icons'; 311 | speak: none; 312 | font-style: normal; 313 | font-weight: normal; 314 | font-variant: normal; 315 | text-transform: none; 316 | -webkit-font-smoothing: antialiased; 317 | -moz-osx-font-smoothing: grayscale; 318 | } 319 | .fui-cross:before { 320 | content: "\e609"; 321 | } 322 | .fui-info-circle:before { 323 | content: "\e60f"; 324 | } 325 | .fui-photo:before { 326 | content: "\e62a"; 327 | } 328 | .fui-eye:before { 329 | content: "\e62c"; 330 | } 331 | .fui-chat:before { 332 | content: "\e62d"; 333 | } 334 | .fui-home:before { 335 | content: "\e62e"; 336 | } 337 | .fui-user:before { 338 | content: "\e631"; 339 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | live2d_ai演示demo 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |

live2d演示demo

26 | 27 |
28 | 29 |

鼠标移到这行字可以触发live2d小人对话哦

30 | 31 |

点击这行字可以触发live2d小人对话哦

32 | 33 |

34 |

她也可以监听到你的动作哦，不信你ctrl+c试试看，她知道你复制了

35 |

你也可以打开控制台，她能监听到你打开了控制台并给出反馈

36 | 37 |

38 | 39 | 40 |

41 | 我给她加了聊天ai，你们可以在她的左边的输入框跟她聊天
42 | 我给也给她增加了图片识别功能，主要是用来识别图片人物的，她能几乎认出所有的av女优！！ 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 57 |

58 |

59 |

60 |

61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | --------------------------------------------------------------------------------