From e89dde2466c58ba1f1fb08062ec1d8a21bdba740 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Tue, 12 Nov 2019 17:27:00 +0800 Subject: [PATCH] Use LF instead of CRLF --- waifu-tips.js | 500 ++++++++++++++++++++++++------------------------ waifu-tips.json | 430 ++++++++++++++++++++--------------------- waifu.css | 470 ++++++++++++++++++++++----------------------- 3 files changed, 700 insertions(+), 700 deletions(-) diff --git a/waifu-tips.js b/waifu-tips.js index b2a5767..6870565 100755 --- a/waifu-tips.js +++ b/waifu-tips.js @@ -1,250 +1,250 @@ -/* - * https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02 - * https://www.fghrsh.net/post/123.html - */ - -function loadWidget(waifuPath, apiPath) { - localStorage.removeItem("waifu-display"); - sessionStorage.removeItem("waifu-text"); - $("body").append(`
-
- -
- - - - - - - -
-
`); - $("#waifu").show().animate({ bottom: 0 }, 3000); - - function registerEventListener() { - $("#waifu-tool .fa-comment").click(showHitokoto); - $("#waifu-tool .fa-paper-plane").click(() => { - if (window.Asteroids) { - if (!window.ASTEROIDSPLAYERS) window.ASTEROIDSPLAYERS = []; - window.ASTEROIDSPLAYERS.push(new Asteroids()); - } else { - $.ajax({ - url: "https://cdn.jsdelivr.net/gh/GalaxyMimi/CDN/asteroids.js", - dataType: "script", - cache: true - }); - } - }); - $("#waifu-tool .fa-user-circle").click(loadOtherModel); - $("#waifu-tool .fa-street-view").click(loadRandModel); - $("#waifu-tool .fa-camera-retro").click(() => { - showMessage("照好了嘛，是不是很可爱呢？", 6000, 9); - Live2D.captureName = "photo.png"; - Live2D.captureFrame = true; - }); - $("#waifu-tool .fa-info-circle").click(() => { - open("https://github.com/stevenjoezhang/live2d-widget"); - }); - $("#waifu-tool .fa-times").click(() => { - localStorage.setItem("waifu-display", new Date().getTime()); - showMessage("愿你有一天能与重要的人重逢。", 2000, 11); - $("#waifu").animate({ bottom: -500 }, 3000, () => { - $("#waifu").hide(); - $("#waifu-toggle").show().animate({ "margin-left": -50 }, 1000); - }); - }); - var re = /x/; - console.log(re); - re.toString = () => { - showMessage("哈哈，你打开了控制台，是想要看看我的小秘密吗？", 6000, 9); - return ""; - }; - $(document).on("copy", () => { - showMessage("你都复制了些什么呀，转载要记得加上出处哦！", 6000, 9); - }); - $(document).on("visibilitychange", () => { - if (!document.hidden) showMessage("哇，你终于回来了～", 6000, 9); - }); - } - registerEventListener(); - - function welcomeMessage() { - var SiteIndexUrl = location.port ? `${location.protocol}//${location.hostname}:${location.port}/` : `${location.protocol}//${location.hostname}/`, text; //自动获取主页 - if (location.href == SiteIndexUrl) { //如果是主页 - var now = new Date().getHours(); - if (now > 5 && now <= 7) text = "早上好！一日之计在于晨，美好的一天就要开始了。"; - else if (now > 7 && now <= 11) text = "上午好！工作顺利嘛，不要久坐，多起来走动走动哦！"; - else if (now > 11 && now <= 14) text = "中午了，工作了一个上午，现在是午餐时间！"; - else if (now > 14 && now <= 17) text = "午后很容易犯困呢，今天的运动目标完成了吗？"; - else if (now > 17 && now <= 19) text = "傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红～"; - else if (now > 19 && now <= 21) text = "晚上好，今天过得怎么样？"; - else if (now > 21 && now <= 23) text = ["已经这么晚了呀，早点休息吧，晚安～", "深夜时要爱护眼睛呀！"]; - else text = "你是夜猫子呀？这么晚还不睡觉，明天起的来嘛？"; - } else if (document.referrer !== "") { - var referrer = document.createElement("a"); - referrer.href = document.referrer; - var domain = referrer.hostname.split(".")[1]; - if (location.hostname == referrer.hostname) text = `欢迎阅读『${document.title.split(" - ")[0]}』`; - else if (domain == "baidu") text = `Hello！来自 百度搜索 的朋友
你是搜索 ${referrer.search.split("&wd=")[1].split("&")[0]} 找到的我吗？`; - else if (domain == "so") text = `Hello！来自 360搜索 的朋友
你是搜索 ${referrer.search.split("&q=")[1].split("&")[0]} 找到的我吗？`; - else if (domain == "google") text = `Hello！来自 谷歌搜索 的朋友
欢迎阅读『${document.title.split(" - ")[0]}』`; - else text = `Hello！来自 ${referrer.hostname} 的朋友`; - } else { - text = `欢迎阅读『${document.title.split(" - ")[0]}』`; - } - showMessage(text, 7000, 8); - } - welcomeMessage(); - //检测用户活动状态，并在空闲时定时显示一言 - var userAction = false, - hitokotoTimer = null, - messageTimer = null, - messageArray = ["好久不见，日子过得好快呢……", "大坏蛋！你都多久没理人家了呀，嘤嘤嘤～", "嗨～快来逗我玩吧！", "拿小拳拳锤你胸口！"]; - if ($(".fa-share-alt").is(":hidden")) messageArray.push("记得把小家加入 Adblock 白名单哦！"); - $(document).mousemove(() => { - userAction = true; - }).keydown(() => { - userAction = true; - }); - setInterval(() => { - if (!userAction) { - if (!hitokotoTimer) hitokotoTimer = setInterval(showHitokoto, 25000); - } else { - userAction = false; - clearInterval(hitokotoTimer); - hitokotoTimer = null; - } - }, 1000); - - function showHitokoto() { - //增加 hitokoto.cn 的 API - if (Math.random() < 0.6 && messageArray.length > 0) showMessage(messageArray[Math.floor(Math.random() * messageArray.length)], 6000, 9); - else $.getJSON("https://v1.hitokoto.cn", function(result) { - var text = `这句一言来自 『${result.from}』，是 ${result.creator} 在 hitokoto.cn 投稿的。`; - showMessage(result.hitokoto, 6000, 9); - setTimeout(() => { - showMessage(text, 4000, 9); - }, 6000); - }); - } - - function showMessage(text, timeout, priority) { - if (!text) return; - if (!sessionStorage.getItem("waifu-text") || sessionStorage.getItem("waifu-text") <= priority) { - if (messageTimer) { - clearTimeout(messageTimer); - messageTimer = null; - } - if (Array.isArray(text)) text = text[Math.floor(Math.random() * text.length)]; - sessionStorage.setItem("waifu-text", priority); - $("#waifu-tips").stop().html(text).fadeTo(200, 1); - messageTimer = setTimeout(() => { - sessionStorage.removeItem("waifu-text"); - $("#waifu-tips").fadeTo(1000, 0); - }, timeout); - } - } - - function initModel() { - var modelId = localStorage.getItem("modelId"), - modelTexturesId = localStorage.getItem("modelTexturesId"); - if (modelId == null) { - //首次访问加载 指定模型 的 指定材质 - var modelId = 1, //模型 ID - modelTexturesId = 53; //材质 ID - } - loadModel(modelId, modelTexturesId); - $.getJSON(waifuPath, function(result) { - $.each(result.mouseover, function(index, tips) { - $(document).on("mouseover", tips.selector, function() { - var text = Array.isArray(tips.text) ? tips.text[Math.floor(Math.random() * tips.text.length)] : tips.text; - text = text.replace("{text}", $(this).text()); - showMessage(text, 4000, 8); - }); - }); - $.each(result.click, function(index, tips) { - $(document).on("click", tips.selector, function() { - var text = Array.isArray(tips.text) ? tips.text[Math.floor(Math.random() * tips.text.length)] : tips.text; - text = text.replace("{text}", $(this).text()); - showMessage(text, 4000, 8); - }); - }); - $.each(result.seasons, function(index, tips) { - var now = new Date(), - after = tips.date.split("-")[0], - before = tips.date.split("-")[1] || after; - if ((after.split("/")[0] <= now.getMonth() + 1 && now.getMonth() + 1 <= before.split("/")[0]) && (after.split("/")[1] <= now.getDate() && now.getDate() <= before.split("/")[1])) { - var text = Array.isArray(tips.text) ? tips.text[Math.floor(Math.random() * tips.text.length)] : tips.text; - text = text.replace("{year}", now.getFullYear()); - //showMessage(text, 7000, true); - messageArray.push(text); - } - }); - }); - } - initModel(); - - function loadModel(modelId, modelTexturesId) { - localStorage.setItem("modelId", modelId); - if (modelTexturesId === undefined) modelTexturesId = 0; - localStorage.setItem("modelTexturesId", modelTexturesId); - loadlive2d("live2d", `${apiPath}/get/?id=${modelId}-${modelTexturesId}`, console.log(`Live2D 模型 ${modelId}-${modelTexturesId} 加载完成`)); - } - - function loadRandModel() { - var modelId = localStorage.getItem("modelId"), - modelTexturesId = localStorage.getItem("modelTexturesId"); - //可选 "rand"(随机), "switch"(顺序) - $.ajax({ - cache: false, - url: `${apiPath}/rand_textures/?id=${modelId}-${modelTexturesId}`, - dataType: "json", - success: function(result) { - if (result.textures["id"] == 1 && (modelTexturesId == 1 || modelTexturesId == 0)) showMessage("我还没有其他衣服呢！", 4000, 10); - else showMessage("我的新衣服好看嘛？", 4000, 10); - loadModel(modelId, result.textures["id"]); - } - }); - } - - function loadOtherModel() { - var modelId = localStorage.getItem("modelId"); - $.ajax({ - cache: false, - url: `${apiPath}/switch/?id=${modelId}`, - dataType: "json", - success: function(result) { - loadModel(result.model["id"]); - showMessage(result.model["message"], 4000, 10); - } - }); - } -} - -function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") { - if (screen.width <= 768) return; - $("body").append(`
- 看板娘 -
`); - $("#waifu-toggle").hover(() => { - $("#waifu-toggle").animate({ "margin-left": -30 }, 500); - }, () => { - $("#waifu-toggle").animate({ "margin-left": -50 }, 500); - }).click(() => { - $("#waifu-toggle").animate({ "margin-left": -100 }, 1000, () => { - $("#waifu-toggle").hide(); - }); - if ($("#waifu-toggle").attr("first-time")) { - loadWidget(waifuPath, apiPath); - $("#waifu-toggle").attr("first-time", false); - } else { - localStorage.removeItem("waifu-display"); - $("#waifu").show().animate({ bottom: 0 }, 3000); - } - }); - if (localStorage.getItem("waifu-display") && new Date().getTime() - localStorage.getItem("waifu-display") <= 86400000) { - $("#waifu-toggle").attr("first-time", true).css({ "margin-left": -50 }); - } else { - loadWidget(waifuPath, apiPath); - } -} +/* + * https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02 + * https://www.fghrsh.net/post/123.html + */ + +function loadWidget(waifuPath, apiPath) { + localStorage.removeItem("waifu-display"); + sessionStorage.removeItem("waifu-text"); + $("body").append(`
+
+ +
+ + + + + + + +
+
`); + $("#waifu").show().animate({ bottom: 0 }, 3000); + + function registerEventListener() { + $("#waifu-tool .fa-comment").click(showHitokoto); + $("#waifu-tool .fa-paper-plane").click(() => { + if (window.Asteroids) { + if (!window.ASTEROIDSPLAYERS) window.ASTEROIDSPLAYERS = []; + window.ASTEROIDSPLAYERS.push(new Asteroids()); + } else { + $.ajax({ + url: "https://cdn.jsdelivr.net/gh/GalaxyMimi/CDN/asteroids.js", + dataType: "script", + cache: true + }); + } + }); + $("#waifu-tool .fa-user-circle").click(loadOtherModel); + $("#waifu-tool .fa-street-view").click(loadRandModel); + $("#waifu-tool .fa-camera-retro").click(() => { + showMessage("照好了嘛，是不是很可爱呢？", 6000, 9); + Live2D.captureName = "photo.png"; + Live2D.captureFrame = true; + }); + $("#waifu-tool .fa-info-circle").click(() => { + open("https://github.com/stevenjoezhang/live2d-widget"); + }); + $("#waifu-tool .fa-times").click(() => { + localStorage.setItem("waifu-display", new Date().getTime()); + showMessage("愿你有一天能与重要的人重逢。", 2000, 11); + $("#waifu").animate({ bottom: -500 }, 3000, () => { + $("#waifu").hide(); + $("#waifu-toggle").show().animate({ "margin-left": -50 }, 1000); + }); + }); + var re = /x/; + console.log(re); + re.toString = () => { + showMessage("哈哈，你打开了控制台，是想要看看我的小秘密吗？", 6000, 9); + return ""; + }; + $(document).on("copy", () => { + showMessage("你都复制了些什么呀，转载要记得加上出处哦！", 6000, 9); + }); + $(document).on("visibilitychange", () => { + if (!document.hidden) showMessage("哇，你终于回来了～", 6000, 9); + }); + } + registerEventListener(); + + function welcomeMessage() { + var SiteIndexUrl = location.port ? `${location.protocol}//${location.hostname}:${location.port}/` : `${location.protocol}//${location.hostname}/`, text; //自动获取主页 + if (location.href == SiteIndexUrl) { //如果是主页 + var now = new Date().getHours(); + if (now > 5 && now <= 7) text = "早上好！一日之计在于晨，美好的一天就要开始了。"; + else if (now > 7 && now <= 11) text = "上午好！工作顺利嘛，不要久坐，多起来走动走动哦！"; + else if (now > 11 && now <= 14) text = "中午了，工作了一个上午，现在是午餐时间！"; + else if (now > 14 && now <= 17) text = "午后很容易犯困呢，今天的运动目标完成了吗？"; + else if (now > 17 && now <= 19) text = "傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红～"; + else if (now > 19 && now <= 21) text = "晚上好，今天过得怎么样？"; + else if (now > 21 && now <= 23) text = ["已经这么晚了呀，早点休息吧，晚安～", "深夜时要爱护眼睛呀！"]; + else text = "你是夜猫子呀？这么晚还不睡觉，明天起的来嘛？"; + } else if (document.referrer !== "") { + var referrer = document.createElement("a"); + referrer.href = document.referrer; + var domain = referrer.hostname.split(".")[1]; + if (location.hostname == referrer.hostname) text = `欢迎阅读『${document.title.split(" - ")[0]}』`; + else if (domain == "baidu") text = `Hello！来自 百度搜索 的朋友
你是搜索 ${referrer.search.split("&wd=")[1].split("&")[0]} 找到的我吗？`; + else if (domain == "so") text = `Hello！来自 360搜索 的朋友
你是搜索 ${referrer.search.split("&q=")[1].split("&")[0]} 找到的我吗？`; + else if (domain == "google") text = `Hello！来自 谷歌搜索 的朋友
欢迎阅读『${document.title.split(" - ")[0]}』`; + else text = `Hello！来自 ${referrer.hostname} 的朋友`; + } else { + text = `欢迎阅读『${document.title.split(" - ")[0]}』`; + } + showMessage(text, 7000, 8); + } + welcomeMessage(); + //检测用户活动状态，并在空闲时定时显示一言 + var userAction = false, + hitokotoTimer = null, + messageTimer = null, + messageArray = ["好久不见，日子过得好快呢……", "大坏蛋！你都多久没理人家了呀，嘤嘤嘤～", "嗨～快来逗我玩吧！", "拿小拳拳锤你胸口！"]; + if ($(".fa-share-alt").is(":hidden")) messageArray.push("记得把小家加入 Adblock 白名单哦！"); + $(document).mousemove(() => { + userAction = true; + }).keydown(() => { + userAction = true; + }); + setInterval(() => { + if (!userAction) { + if (!hitokotoTimer) hitokotoTimer = setInterval(showHitokoto, 25000); + } else { + userAction = false; + clearInterval(hitokotoTimer); + hitokotoTimer = null; + } + }, 1000); + + function showHitokoto() { + //增加 hitokoto.cn 的 API + if (Math.random() < 0.6 && messageArray.length > 0) showMessage(messageArray[Math.floor(Math.random() * messageArray.length)], 6000, 9); + else $.getJSON("https://v1.hitokoto.cn", function(result) { + var text = `这句一言来自 『${result.from}』，是 ${result.creator} 在 hitokoto.cn 投稿的。`; + showMessage(result.hitokoto, 6000, 9); + setTimeout(() => { + showMessage(text, 4000, 9); + }, 6000); + }); + } + + function showMessage(text, timeout, priority) { + if (!text) return; + if (!sessionStorage.getItem("waifu-text") || sessionStorage.getItem("waifu-text") <= priority) { + if (messageTimer) { + clearTimeout(messageTimer); + messageTimer = null; + } + if (Array.isArray(text)) text = text[Math.floor(Math.random() * text.length)]; + sessionStorage.setItem("waifu-text", priority); + $("#waifu-tips").stop().html(text).fadeTo(200, 1); + messageTimer = setTimeout(() => { + sessionStorage.removeItem("waifu-text"); + $("#waifu-tips").fadeTo(1000, 0); + }, timeout); + } + } + + function initModel() { + var modelId = localStorage.getItem("modelId"), + modelTexturesId = localStorage.getItem("modelTexturesId"); + if (modelId == null) { + //首次访问加载 指定模型 的 指定材质 + var modelId = 1, //模型 ID + modelTexturesId = 53; //材质 ID + } + loadModel(modelId, modelTexturesId); + $.getJSON(waifuPath, function(result) { + $.each(result.mouseover, function(index, tips) { + $(document).on("mouseover", tips.selector, function() { + var text = Array.isArray(tips.text) ? tips.text[Math.floor(Math.random() * tips.text.length)] : tips.text; + text = text.replace("{text}", $(this).text()); + showMessage(text, 4000, 8); + }); + }); + $.each(result.click, function(index, tips) { + $(document).on("click", tips.selector, function() { + var text = Array.isArray(tips.text) ? tips.text[Math.floor(Math.random() * tips.text.length)] : tips.text; + text = text.replace("{text}", $(this).text()); + showMessage(text, 4000, 8); + }); + }); + $.each(result.seasons, function(index, tips) { + var now = new Date(), + after = tips.date.split("-")[0], + before = tips.date.split("-")[1] || after; + if ((after.split("/")[0] <= now.getMonth() + 1 && now.getMonth() + 1 <= before.split("/")[0]) && (after.split("/")[1] <= now.getDate() && now.getDate() <= before.split("/")[1])) { + var text = Array.isArray(tips.text) ? tips.text[Math.floor(Math.random() * tips.text.length)] : tips.text; + text = text.replace("{year}", now.getFullYear()); + //showMessage(text, 7000, true); + messageArray.push(text); + } + }); + }); + } + initModel(); + + function loadModel(modelId, modelTexturesId) { + localStorage.setItem("modelId", modelId); + if (modelTexturesId === undefined) modelTexturesId = 0; + localStorage.setItem("modelTexturesId", modelTexturesId); + loadlive2d("live2d", `${apiPath}/get/?id=${modelId}-${modelTexturesId}`, console.log(`Live2D 模型 ${modelId}-${modelTexturesId} 加载完成`)); + } + + function loadRandModel() { + var modelId = localStorage.getItem("modelId"), + modelTexturesId = localStorage.getItem("modelTexturesId"); + //可选 "rand"(随机), "switch"(顺序) + $.ajax({ + cache: false, + url: `${apiPath}/rand_textures/?id=${modelId}-${modelTexturesId}`, + dataType: "json", + success: function(result) { + if (result.textures["id"] == 1 && (modelTexturesId == 1 || modelTexturesId == 0)) showMessage("我还没有其他衣服呢！", 4000, 10); + else showMessage("我的新衣服好看嘛？", 4000, 10); + loadModel(modelId, result.textures["id"]); + } + }); + } + + function loadOtherModel() { + var modelId = localStorage.getItem("modelId"); + $.ajax({ + cache: false, + url: `${apiPath}/switch/?id=${modelId}`, + dataType: "json", + success: function(result) { + loadModel(result.model["id"]); + showMessage(result.model["message"], 4000, 10); + } + }); + } +} + +function initWidget(waifuPath = "/waifu-tips.json", apiPath = "") { + if (screen.width <= 768) return; + $("body").append(`
+ 看板娘 +
`); + $("#waifu-toggle").hover(() => { + $("#waifu-toggle").animate({ "margin-left": -30 }, 500); + }, () => { + $("#waifu-toggle").animate({ "margin-left": -50 }, 500); + }).click(() => { + $("#waifu-toggle").animate({ "margin-left": -100 }, 1000, () => { + $("#waifu-toggle").hide(); + }); + if ($("#waifu-toggle").attr("first-time")) { + loadWidget(waifuPath, apiPath); + $("#waifu-toggle").attr("first-time", false); + } else { + localStorage.removeItem("waifu-display"); + $("#waifu").show().animate({ bottom: 0 }, 3000); + } + }); + if (localStorage.getItem("waifu-display") && new Date().getTime() - localStorage.getItem("waifu-display") <= 86400000) { + $("#waifu-toggle").attr("first-time", true).css({ "margin-left": -50 }); + } else { + loadWidget(waifuPath, apiPath); + } +} diff --git a/waifu-tips.json b/waifu-tips.json index 59f8bab..69fa4b8 100755 --- a/waifu-tips.json +++ b/waifu-tips.json @@ -1,215 +1,215 @@ -{ - "mouseover": [{ - "selector": "#waifu #live2d", - "text": ["干嘛呢你，快把手拿开～～", "鼠…鼠标放错地方了！", "你要干嘛呀？", "喵喵喵？", "怕怕(ノ≧∇≦)ノ", "非礼呀！救命！", "这样的话，只能使用武力了！", "我要生气了哦", "不要动手动脚的！", "真…真的是不知羞耻！", "Hentai！"] - }, { - "selector": "#waifu-tool .fa-comment", - "text": ["猜猜我要说些什么？", "我从青蛙王子那里听到了不少人生经验。"] - }, { - "selector": "#waifu-tool .fa-paper-plane", - "text": ["要不要来玩飞机大战？", "这个按钮上写着“不要点击”。", "怎么，你想来和我玩个游戏？", "听说这样可以蹦迪！"] - }, { - "selector": "#waifu-tool .fa-user-circle", - "text": ["你是不是不爱人家了呀，呜呜呜～", "要见见我的姐姐嘛？", "想要看我妹妹嘛？", "要切换看板娘吗？"] - }, { - "selector": "#waifu-tool .fa-street-view", - "text": ["喜欢换装 PLAY 吗？", "这次要扮演什么呢？", "变装！", "让我们看看接下来会发生什么！"] - }, { - "selector": "#waifu-tool .fa-camera-retro", - "text": ["你要给我拍照呀？一二三～茄子～", "要不，我们来合影吧！", "保持微笑就好了～"] - }, { - "selector": "#waifu-tool .fa-info-circle", - "text": ["想要知道更多关于我的事么？", "这里记录着我搬家的历史呢。", "你想深入了解我什么呢？"] - }, { - "selector": "#waifu-tool .fa-times", - "text": ["到了要说再见的时候了吗？", "呜呜 QAQ 后会有期……", "不要抛弃我呀……", "我们，还能再见面吗……", "哼，你会后悔的！"] - }, { - "selector": ".menu-item-home", - "text": ["点击前往首页，想回到上一页可以使用浏览器的后退功能哦。", "点它就可以回到首页啦！", "回首页看看吧。"] - }, { - "selector": ".menu-item-about", - "text": ["你想知道我家主人是谁吗？", "这里有一些关于我家主人的秘密哦，要不要看看呢？", "发现主人出没地点！"] - }, { - "selector": ".menu-item-tags", - "text": ["点击就可以看文章的标签啦！", "点击来查看所有标签哦。", "快看看这里都有什么呢！"] - }, { - "selector": ".menu-item-categories", - "text": ["文章都分类好啦～", "点击来查看文章分类哦。", "快看看这里都有什么呢！"] - }, { - "selector": ".menu-item-archives", - "text": ["翻页比较麻烦吗，那就来看看文章归档吧。", "文章目录都整理在这里啦！", "快看看这里都有什么呢？"] - }, { - "selector": ".menu-item-friends", - "text": ["这是我的朋友们哦ヾ(◍°∇°◍)ﾉﾞ", "要去大佬们的家看看吗？", "要去拜访一下我的朋友们吗？"] - }, { - "selector": ".menu-item-search", - "text": ["找不到想看的内容？搜索看看吧！", "在找什么东西呢，需要帮忙吗？"] - }, { - "selector": ".site-author", - "text": ["我家主人好看吗？", "这是我家主人(*´∇｀*)"] - }, { - "selector": ".site-state", - "text": ["这是文章的统计信息～", "要不要点进去看看？"] - }, { - "selector": ".feed-link a", - "text": ["这里可以使用 RSS 订阅呢！", "利用 feed 订阅器，就能快速知道博客有没有更新了呢。"] - }, { - "selector": ".cc-opacity, .post-copyright-author", - "text": ["要记得规范转载哦。", "所有文章均采用 CC BY-NC-SA 4.0 许可协议～", "转载前要先注意下文章的版权协议呢。"] - }, { - "selector": ".links-of-author", - "text": ["这里是主人的常驻地址哦。", "这里有主人的联系方式！"] - }, { - "selector": "#qrcode", - "text": ["手机扫一下就能继续看，很方便呢～", "扫一扫，打开新世界的大门！"] - }, { - "selector": ".fancybox img, img.medium-zoom-image", - "text": ["点击图片可以放大呢！"] - }, { - "selector": ".highlight-wrap, .gist", - "text": ["代码可以直接点击复制哟。", "GitHub！我是新手！", "PHP 是最好的语言！"] - }, { - "selector": ".container a[href^='http'], .nav-link .nav-text", - "text": ["要去看看 {text} 么？", "去 {text} 逛逛吧。", "到 {text} 看看吧。"] - }, { - "selector": "a[href^='mailto']", - "text": ["邮件我会及时回复的！", "点击就可以发送邮件啦～"] - }, { - "selector": "a[href^='/tags/']", - "text": ["要去看看 {text} 标签么？", "点它可以查看此标签下的所有文章哟！"] - }, { - "selector": "a[href^='/categories/']", - "text": ["要去看看 {text} 分类么？", "点它可以查看此分类下的所有文章哟！"] - }, { - "selector": ".post-title-link", - "text": ["要看看 {text} 这篇文章吗？"] - }, { - "selector": "a[rel='contents']", - "text": ["点击来阅读全文哦。"] - }, { - "selector": "a[itemprop='discussionUrl']", - "text": ["要去看看评论吗？"] - }, { - "selector": ".back-to-top", - "text": ["点它就可以回到顶部啦！", "又回到最初的起点～", "要回到开始的地方么？"] - }, { - "selector": "#rewardButton", - "text": ["我是不是棒棒哒～快给我点赞吧！", "要打赏我嘛？好期待啊～", "主人最近在吃土呢，很辛苦的样子，给他一些钱钱吧～"] - }, { - "selector": "#wechat", - "text": ["这是我的微信二维码～"] - }, { - "selector": "#alipay", - "text": ["这是我的支付宝哦！"] - }, { - "selector": "#bitcoin", - "text": ["这是我的比特币账号！"] - }, { - "selector": "#needsharebutton-postbottom .btn", - "text": ["好东西要让更多人知道才行哦。", "觉得文章有帮助的话，可以分享给更多需要的朋友呢。"] - }, { - "selector": ".need-share-button_weibo", - "text": ["微博？来分享一波喵！"] - }, { - "selector": ".need-share-button_wechat", - "text": ["分享到微信吧！"] - }, { - "selector": ".need-share-button_douban", - "text": ["分享到豆瓣好像也不错！"] - }, { - "selector": ".need-share-button_qqzone", - "text": ["QQ空间，一键转发，耶～"] - }, { - "selector": ".need-share-button_twitter", - "text": ["Twitter？好像是不存在的东西？"] - }, { - "selector": ".need-share-button_facebook", - "text": ["emmm…FB好像也是不存在的东西？"] - }, { - "selector": ".post-nav-next", - "text": ["来看看下一篇文章吧。", "点它可以看下一篇文章哦！", "要翻到下一篇文章吗？"] - }, { - "selector": ".post-nav-prev", - "text": ["来看看上一篇文章吧。", "点它可以看上一篇文章哦！", "要翻到上一篇文章吗？"] - }, { - "selector": ".extend.next", - "text": ["去下一页看看吧。", "点它可以前进哦！", "要翻到下一页吗？"] - }, { - "selector": ".extend.prev", - "text": ["去上一页看看吧。", "点它可以后退哦！", "要翻到上一页吗？"] - }, { - "selector": "input.vnick", - "text": ["该怎么称呼你呢？", "留下你的尊姓大名！"] - }, { - "selector": ".vmail", - "text": ["留下你的邮箱，不然就是无头像人士了！", "记得设置好 Gravatar 头像哦！", "为了方便通知你最新消息，一定要留下邮箱！"] - }, { - "selector": ".vlink", - "text": ["快快告诉我你的家在哪里，好让我去参观参观！"] - }, { - "selector": ".veditor", - "text": ["想要去评论些什么吗？", "要说点什么吗？", "觉得博客不错？快来留言和主人交流吧！"] - }, { - "selector": ".vcontrol a", - "text": ["你会不会熟练使用Markdown呀？", "使用Markdown让评论更美观吧～"] - }, { - "selector": ".vemoji-btn", - "text": ["要插入一个萌萌哒的表情吗？", "要来一发表情吗？"] - }, { - "selector": ".vpreview-btn", - "text": ["要预览一下你的发言吗？", "快看看你的评论有多少负熵！"] - }, { - "selector": ".vsubmit", - "text": ["评论没有审核，要对自己的发言负责哦～", "要提交了吗，请耐心等待回复哦～"] - }, { - "selector": ".vcontent", - "text": ["哇，快看看这个精彩评论！", "如果有疑问，请尽快留言哦～"] - }], - "click": [{ - "selector": "#waifu #live2d", - "text": ["是…是不小心碰到了吧…", "萝莉控是什么呀？", "你看到我的小熊了吗？", "再摸的话我可要报警了！⌇●﹏●⌇", "110吗，这里有个变态一直在摸我(ó﹏ò｡)", "不要摸我了，我会告诉老婆来打你的！", "干嘛动我呀！小心我咬你！", "别摸我，有什么好摸的！"] - }, { - "selector": ".veditor", - "text": ["要吐槽些什么呢？", "一定要认真填写喵～", "有什么想说的吗？"] - }, { - "selector": ".vsubmit", - "text": ["输入验证码就可以提交评论啦～"] - }], - "seasons": [{ - "date": "01/01", - "text": "元旦了呢，新的一年又开始了，今年是{year}年～" - }, { - "date": "02/14", - "text": "又是一年情人节，{year}年找到对象了嘛～" - }, { - "date": "03/08", - "text": "今天是国际妇女节！" - }, { - "date": "03/12", - "text": "今天是植树节，要保护环境呀！" - }, { - "date": "04/01", - "text": "悄悄告诉你一个秘密～今天是愚人节，不要被骗了哦～" - }, { - "date": "05/01", - "text": "今天是五一劳动节，计划好假期去哪里了吗～" - }, { - "date": "06/01", - "text": "儿童节了呢，快活的时光总是短暂，要是永远长不大该多好啊…" - }, { - "date": "09/03", - "text": "中国人民抗日战争胜利纪念日，铭记历史、缅怀先烈、珍爱和平、开创未来。" - }, { - "date": "09/10", - "text": "教师节，在学校要给老师问声好呀～" - }, { - "date": "10/01", - "text": "国庆节到了，为祖国母亲庆生！" - }, { - "date": "11/05-11/12", - "text": "今年的双十一是和谁一起过的呢～" - }, { - "date": "12/20-12/31", - "text": "这几天是圣诞节，主人肯定又去剁手买买买了～" - }] -} +{ + "mouseover": [{ + "selector": "#waifu #live2d", + "text": ["干嘛呢你，快把手拿开～～", "鼠…鼠标放错地方了！", "你要干嘛呀？", "喵喵喵？", "怕怕(ノ≧∇≦)ノ", "非礼呀！救命！", "这样的话，只能使用武力了！", "我要生气了哦", "不要动手动脚的！", "真…真的是不知羞耻！", "Hentai！"] + }, { + "selector": "#waifu-tool .fa-comment", + "text": ["猜猜我要说些什么？", "我从青蛙王子那里听到了不少人生经验。"] + }, { + "selector": "#waifu-tool .fa-paper-plane", + "text": ["要不要来玩飞机大战？", "这个按钮上写着“不要点击”。", "怎么，你想来和我玩个游戏？", "听说这样可以蹦迪！"] + }, { + "selector": "#waifu-tool .fa-user-circle", + "text": ["你是不是不爱人家了呀，呜呜呜～", "要见见我的姐姐嘛？", "想要看我妹妹嘛？", "要切换看板娘吗？"] + }, { + "selector": "#waifu-tool .fa-street-view", + "text": ["喜欢换装 PLAY 吗？", "这次要扮演什么呢？", "变装！", "让我们看看接下来会发生什么！"] + }, { + "selector": "#waifu-tool .fa-camera-retro", + "text": ["你要给我拍照呀？一二三～茄子～", "要不，我们来合影吧！", "保持微笑就好了～"] + }, { + "selector": "#waifu-tool .fa-info-circle", + "text": ["想要知道更多关于我的事么？", "这里记录着我搬家的历史呢。", "你想深入了解我什么呢？"] + }, { + "selector": "#waifu-tool .fa-times", + "text": ["到了要说再见的时候了吗？", "呜呜 QAQ 后会有期……", "不要抛弃我呀……", "我们，还能再见面吗……", "哼，你会后悔的！"] + }, { + "selector": ".menu-item-home", + "text": ["点击前往首页，想回到上一页可以使用浏览器的后退功能哦。", "点它就可以回到首页啦！", "回首页看看吧。"] + }, { + "selector": ".menu-item-about", + "text": ["你想知道我家主人是谁吗？", "这里有一些关于我家主人的秘密哦，要不要看看呢？", "发现主人出没地点！"] + }, { + "selector": ".menu-item-tags", + "text": ["点击就可以看文章的标签啦！", "点击来查看所有标签哦。", "快看看这里都有什么呢！"] + }, { + "selector": ".menu-item-categories", + "text": ["文章都分类好啦～", "点击来查看文章分类哦。", "快看看这里都有什么呢！"] + }, { + "selector": ".menu-item-archives", + "text": ["翻页比较麻烦吗，那就来看看文章归档吧。", "文章目录都整理在这里啦！", "快看看这里都有什么呢？"] + }, { + "selector": ".menu-item-friends", + "text": ["这是我的朋友们哦ヾ(◍°∇°◍)ﾉﾞ", "要去大佬们的家看看吗？", "要去拜访一下我的朋友们吗？"] + }, { + "selector": ".menu-item-search", + "text": ["找不到想看的内容？搜索看看吧！", "在找什么东西呢，需要帮忙吗？"] + }, { + "selector": ".site-author", + "text": ["我家主人好看吗？", "这是我家主人(*´∇｀*)"] + }, { + "selector": ".site-state", + "text": ["这是文章的统计信息～", "要不要点进去看看？"] + }, { + "selector": ".feed-link a", + "text": ["这里可以使用 RSS 订阅呢！", "利用 feed 订阅器，就能快速知道博客有没有更新了呢。"] + }, { + "selector": ".cc-opacity, .post-copyright-author", + "text": ["要记得规范转载哦。", "所有文章均采用 CC BY-NC-SA 4.0 许可协议～", "转载前要先注意下文章的版权协议呢。"] + }, { + "selector": ".links-of-author", + "text": ["这里是主人的常驻地址哦。", "这里有主人的联系方式！"] + }, { + "selector": "#qrcode", + "text": ["手机扫一下就能继续看，很方便呢～", "扫一扫，打开新世界的大门！"] + }, { + "selector": ".fancybox img, img.medium-zoom-image", + "text": ["点击图片可以放大呢！"] + }, { + "selector": ".highlight-wrap, .gist", + "text": ["代码可以直接点击复制哟。", "GitHub！我是新手！", "PHP 是最好的语言！"] + }, { + "selector": ".container a[href^='http'], .nav-link .nav-text", + "text": ["要去看看 {text} 么？", "去 {text} 逛逛吧。", "到 {text} 看看吧。"] + }, { + "selector": "a[href^='mailto']", + "text": ["邮件我会及时回复的！", "点击就可以发送邮件啦～"] + }, { + "selector": "a[href^='/tags/']", + "text": ["要去看看 {text} 标签么？", "点它可以查看此标签下的所有文章哟！"] + }, { + "selector": "a[href^='/categories/']", + "text": ["要去看看 {text} 分类么？", "点它可以查看此分类下的所有文章哟！"] + }, { + "selector": ".post-title-link", + "text": ["要看看 {text} 这篇文章吗？"] + }, { + "selector": "a[rel='contents']", + "text": ["点击来阅读全文哦。"] + }, { + "selector": "a[itemprop='discussionUrl']", + "text": ["要去看看评论吗？"] + }, { + "selector": ".back-to-top", + "text": ["点它就可以回到顶部啦！", "又回到最初的起点～", "要回到开始的地方么？"] + }, { + "selector": "#rewardButton", + "text": ["我是不是棒棒哒～快给我点赞吧！", "要打赏我嘛？好期待啊～", "主人最近在吃土呢，很辛苦的样子，给他一些钱钱吧～"] + }, { + "selector": "#wechat", + "text": ["这是我的微信二维码～"] + }, { + "selector": "#alipay", + "text": ["这是我的支付宝哦！"] + }, { + "selector": "#bitcoin", + "text": ["这是我的比特币账号！"] + }, { + "selector": "#needsharebutton-postbottom .btn", + "text": ["好东西要让更多人知道才行哦。", "觉得文章有帮助的话，可以分享给更多需要的朋友呢。"] + }, { + "selector": ".need-share-button_weibo", + "text": ["微博？来分享一波喵！"] + }, { + "selector": ".need-share-button_wechat", + "text": ["分享到微信吧！"] + }, { + "selector": ".need-share-button_douban", + "text": ["分享到豆瓣好像也不错！"] + }, { + "selector": ".need-share-button_qqzone", + "text": ["QQ空间，一键转发，耶～"] + }, { + "selector": ".need-share-button_twitter", + "text": ["Twitter？好像是不存在的东西？"] + }, { + "selector": ".need-share-button_facebook", + "text": ["emmm…FB好像也是不存在的东西？"] + }, { + "selector": ".post-nav-next", + "text": ["来看看下一篇文章吧。", "点它可以看下一篇文章哦！", "要翻到下一篇文章吗？"] + }, { + "selector": ".post-nav-prev", + "text": ["来看看上一篇文章吧。", "点它可以看上一篇文章哦！", "要翻到上一篇文章吗？"] + }, { + "selector": ".extend.next", + "text": ["去下一页看看吧。", "点它可以前进哦！", "要翻到下一页吗？"] + }, { + "selector": ".extend.prev", + "text": ["去上一页看看吧。", "点它可以后退哦！", "要翻到上一页吗？"] + }, { + "selector": "input.vnick", + "text": ["该怎么称呼你呢？", "留下你的尊姓大名！"] + }, { + "selector": ".vmail", + "text": ["留下你的邮箱，不然就是无头像人士了！", "记得设置好 Gravatar 头像哦！", "为了方便通知你最新消息，一定要留下邮箱！"] + }, { + "selector": ".vlink", + "text": ["快快告诉我你的家在哪里，好让我去参观参观！"] + }, { + "selector": ".veditor", + "text": ["想要去评论些什么吗？", "要说点什么吗？", "觉得博客不错？快来留言和主人交流吧！"] + }, { + "selector": ".vcontrol a", + "text": ["你会不会熟练使用Markdown呀？", "使用Markdown让评论更美观吧～"] + }, { + "selector": ".vemoji-btn", + "text": ["要插入一个萌萌哒的表情吗？", "要来一发表情吗？"] + }, { + "selector": ".vpreview-btn", + "text": ["要预览一下你的发言吗？", "快看看你的评论有多少负熵！"] + }, { + "selector": ".vsubmit", + "text": ["评论没有审核，要对自己的发言负责哦～", "要提交了吗，请耐心等待回复哦～"] + }, { + "selector": ".vcontent", + "text": ["哇，快看看这个精彩评论！", "如果有疑问，请尽快留言哦～"] + }], + "click": [{ + "selector": "#waifu #live2d", + "text": ["是…是不小心碰到了吧…", "萝莉控是什么呀？", "你看到我的小熊了吗？", "再摸的话我可要报警了！⌇●﹏●⌇", "110吗，这里有个变态一直在摸我(ó﹏ò｡)", "不要摸我了，我会告诉老婆来打你的！", "干嘛动我呀！小心我咬你！", "别摸我，有什么好摸的！"] + }, { + "selector": ".veditor", + "text": ["要吐槽些什么呢？", "一定要认真填写喵～", "有什么想说的吗？"] + }, { + "selector": ".vsubmit", + "text": ["输入验证码就可以提交评论啦～"] + }], + "seasons": [{ + "date": "01/01", + "text": "元旦了呢，新的一年又开始了，今年是{year}年～" + }, { + "date": "02/14", + "text": "又是一年情人节，{year}年找到对象了嘛～" + }, { + "date": "03/08", + "text": "今天是国际妇女节！" + }, { + "date": "03/12", + "text": "今天是植树节，要保护环境呀！" + }, { + "date": "04/01", + "text": "悄悄告诉你一个秘密～今天是愚人节，不要被骗了哦～" + }, { + "date": "05/01", + "text": "今天是五一劳动节，计划好假期去哪里了吗～" + }, { + "date": "06/01", + "text": "儿童节了呢，快活的时光总是短暂，要是永远长不大该多好啊…" + }, { + "date": "09/03", + "text": "中国人民抗日战争胜利纪念日，铭记历史、缅怀先烈、珍爱和平、开创未来。" + }, { + "date": "09/10", + "text": "教师节，在学校要给老师问声好呀～" + }, { + "date": "10/01", + "text": "国庆节到了，为祖国母亲庆生！" + }, { + "date": "11/05-11/12", + "text": "今年的双十一是和谁一起过的呢～" + }, { + "date": "12/20-12/31", + "text": "这几天是圣诞节，主人肯定又去剁手买买买了～" + }] +} diff --git a/waifu.css b/waifu.css index 206ebe5..56a60a4 100755 --- a/waifu.css +++ b/waifu.css @@ -1,235 +1,235 @@ -#waifu-toggle { - position: fixed; - writing-mode: vertical-rl; - bottom: 66px; - left: 0px; - background-color: #fa0; - color: #fff; - border-radius: 5px; - padding: 5px 2px 5px 5px; - font-size: 12px; - width: 60px; - cursor: pointer; -} -#waifu { - position: fixed; - bottom: -1000px; - left: 0; - z-index: 1; - line-height: 0; - transition: transform .3s ease-in-out; - transform: translateY(3px); -} -#waifu:hover { - transform: translateY(0); -} -@media (max-width: 768px) { - #waifu { - display: none; - } -} -#waifu-tips { - opacity: 0; - width: 250px; - min-height: 70px; - margin: -30px 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); - font-size: 14px; - line-height: 24px; - word-break: break-all; - text-overflow: ellipsis; - overflow: hidden; - position: absolute; - animation: shake 50s ease-in-out 5s infinite; -} -#waifu #live2d { - position: relative; - cursor: grab; - cursor: -webkit-grab; - cursor: -o-grab; - cursor: -ms-grab; -} -#waifu #live2d:active { - cursor: grabbing; - cursor: -webkit-grabbing; - cursor: -o-grabbing; - cursor: -ms-grabbing; -} -#waifu-tool { - color: #aaa; - top: 70px; - right: -10px; - position: absolute; - opacity: 0; - transition: opacity 1s; -} -#waifu:hover #waifu-tool { - opacity: 1; -} -#waifu-tool span { - display: block; - cursor: pointer; - line-height: 30px; - text-align: center; - color: #5b6c7d; - transition: color .3s; -} -#waifu-tool span:hover { - color: #0684bd;/* #34495e */ -} -@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(0deg); - } -} +#waifu-toggle { + position: fixed; + writing-mode: vertical-rl; + bottom: 66px; + left: 0px; + background-color: #fa0; + color: #fff; + border-radius: 5px; + padding: 5px 2px 5px 5px; + font-size: 12px; + width: 60px; + cursor: pointer; +} +#waifu { + position: fixed; + bottom: -1000px; + left: 0; + z-index: 1; + line-height: 0; + transition: transform .3s ease-in-out; + transform: translateY(3px); +} +#waifu:hover { + transform: translateY(0); +} +@media (max-width: 768px) { + #waifu { + display: none; + } +} +#waifu-tips { + opacity: 0; + width: 250px; + min-height: 70px; + margin: -30px 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); + font-size: 14px; + line-height: 24px; + word-break: break-all; + text-overflow: ellipsis; + overflow: hidden; + position: absolute; + animation: shake 50s ease-in-out 5s infinite; +} +#waifu #live2d { + position: relative; + cursor: grab; + cursor: -webkit-grab; + cursor: -o-grab; + cursor: -ms-grab; +} +#waifu #live2d:active { + cursor: grabbing; + cursor: -webkit-grabbing; + cursor: -o-grabbing; + cursor: -ms-grabbing; +} +#waifu-tool { + color: #aaa; + top: 70px; + right: -10px; + position: absolute; + opacity: 0; + transition: opacity 1s; +} +#waifu:hover #waifu-tool { + opacity: 1; +} +#waifu-tool span { + display: block; + cursor: pointer; + line-height: 30px; + text-align: center; + color: #5b6c7d; + transition: color .3s; +} +#waifu-tool span:hover { + color: #0684bd;/* #34495e */ +} +@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(0deg); + } +}