initial commit

This commit is contained in:
StevenJoeZhang 2018-07-11 13:25:04 +08:00
commit 9e20fb4d5a
4 changed files with 801 additions and 0 deletions

1
live2d.min.js vendored Executable file

File diff suppressed because one or more lines are too long

307
waifu-tips.js Executable file
View File

@ -0,0 +1,307 @@
/*
* https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02
* https://www.fghrsh.net/post/123.html
*/
String.prototype.render = function(context) {
var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g,
strFlag = true,
result = this.replace(tokenReg, function(word, slash1, token, slash2) {
if (slash1 || slash2) {
return word.replace("\\", "");
}
var variables = token.replace(/\s/g, "").split(".");
var currentObject = context;
var i, length, variable;
for (i = 0, length = variables.length; i < length; ++i) {
variable = variables[i];
currentObject = currentObject[variable].replace(/\s/g, "").replace(/\s+/g, "");
if (!currentObject) {
strFlag = false;
return "";
}
}
return currentObject;
});
return strFlag ? result : "";
}
$(window).on("load", function() {
if (sessionStorage.getItem("waifu-display") == "none") return;
sessionStorage.removeItem("waifu-text");
$("body").append('<div class="waifu">\
<div class="waifu-tips"></div>\
<canvas id="live2d" width="300" height="300" class="live2d"></canvas>\
<div class="waifu-tool">\
<span class="fa fa-lg fa-home"></span>\
<span class="fa fa-lg fa-comment"></span>\
<span class="fa fa-lg fa-paper-plane"></span>\
<span class="fa fa-lg fa-address-book"></span>\
<span class="fa fa-lg fa-street-view"></span>\
<span class="fa fa-lg fa-camera-retro"></span>\
<span class="fa fa-lg fa-info-circle"></span>\
<span class="fa fa-lg fa-times"></span>\
</div>\
</div>');
var re = /x/,
OriginTitile = document.title,
titleTime,
title = {
focus: "o(≧∇≦o) 啊咧,又好了……",
blur: "(●—●) 哎呦,崩溃啦!"
};
console.log(re);
re.toString = function() {
showMessage("哈哈,你打开了控制台,是想要看看我的秘密吗?", 6000, 9);
return "";
};
$(document).on("visibilitychange", function() {
if (document.hidden) {
document.title = title.blur;
clearTimeout(titleTime);
} else {
document.title = title.focus;
titleTime = setTimeout(function() {
document.title = OriginTitile;
showMessage("哇,你又回来了~", 6000, 9);
}, 1000);
}
});
$(document).on("copy", function() {
showMessage("你都复制了些什么呀,转载要记得加上出处哦", 6000, 9);
});
$(".waifu-tool .fa-home").click(function() {
location.href = "/";
});
$(".waifu-tool .fa-comment").click(function() {
showHitokoto();
});
$(".waifu-tool .fa-paper-plane").click(function() {
var s = document.createElement("script");
document.body.appendChild(s);
s.src = "https://galaxymimi.com/js/asteroids.js";
});
$(".waifu-tool .fa-address-book").click(function() {
loadOtherModel();
});
$(".waifu-tool .fa-street-view").click(function() {
loadRandModel();
});
$(".waifu-tool .fa-camera-retro").click(function() {
showMessage("照好了嘛,是不是很可爱呢?", 6000, 9);
window.Live2D.captureName = "photo.png";
window.Live2D.captureFrame = true;
});
$(".waifu-tool .fa-info-circle").click(function() {
window.open("https://github.com/stevenjoezhang/live2d-widget");
});
$(".waifu-tool .fa-times").click(function() {
sessionStorage.setItem("waifu-display", "none");
showMessage("愿你有一天能与重要的人重逢", 2000, 11);
setTimeout(function() {
$(".waifu").fadeOut(4000);
}, 1000);
});
(function() {
var text,
SiteIndexUrl = location.port ? location.protocol + "//" + location.hostname + ":" + location.port + "/" : location.protocol + "//" + location.hostname + "/"; // 自动获取主页
//var SiteIndexUrl = "https://www.fghrsh.net/"; // 手动指定主页
if (location.href == SiteIndexUrl) { // 如果是主页
var now = (new Date()).getHours();
if (now > 23 || now <= 5) {
text = "你是夜猫子呀?这么晚还不睡觉,明天起的来嘛";
} else 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 = '欢迎阅读<span style="color:#0099cc;">『' + document.title.split(' - ')[0] + '』</span>';
} else if (domain == 'baidu') {
text = 'Hello! 来自 百度搜索 的朋友<br>你是搜索 <span style="color:#0099cc;">' + referrer.search.split('&wd=')[1].split('&')[0] + '</span> 找到的我吗?';
} else if (domain == 'so') {
text = 'Hello! 来自 360搜索 的朋友<br>你是搜索 <span style="color:#0099cc;">' + referrer.search.split('&q=')[1].split('&')[0] + '</span> 找到的我吗?';
} else if (domain == 'google') {
text = 'Hello! 来自 谷歌搜索 的朋友<br>欢迎阅读<span style="color:#0099cc;">『' + document.title.split(' - ')[0] + '』</span>';
} else {
text = 'Hello! 来自 <span style="color:#0099cc;">' + referrer.hostname + '</span> 的朋友';
}
} else {
text = '欢迎阅读<span style="color:#0099cc;">『' + document.title.split(' - ')[0] + '』</span>';
}
}
showMessage(text, 7000, 8);
})();
/* 检测用户活动状态,并在空闲时 定时显示一言 */
var getActed = false,
hitokotoTimer = null,
messageTimer = null,
messageArray = ["已经过了这么久了呀,日子过得好快呢", "使用Chrome可以获得最佳浏览体验哦", "嗨~快来逗我玩吧!", "拿小拳拳锤你胸口", "她性格之奇特,绝非偶然"],
apiURL = "";
if ($(".fa-share-alt").is(":hidden")) messageArray.push("记得把小家加入Adblock白名单哦");
$(document).mousemove(function() {
getActed = true;
}).keydown(function() {
getActed = true;
});
//hitokotoTimer = setInterval(showHitokoto, 30000);
setInterval(function() {
if (!getActed) {
if (!hitokotoTimer) {
hitokotoTimer = setInterval(showHitokoto, 25000);
}
} else {
getActed = 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 = '这句一言来自 <span style="color:#0099cc;">『{source}』</span>,是 <span style="color:#0099cc;">{creator}</span> 在 hitokoto.cn 投稿的。';
text = text.render({
source: result.from,
creator: result.creator
});
showMessage(result.hitokoto, 6000, 9);
setTimeout(function() {
showMessage(text, 4000, 9);
}, 6000);
});
}
function showMessage(text, timeout, priority) {
//console.log(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)];
//console.log(text);
sessionStorage.setItem("waifu-text", priority);
$(".waifu-tips").stop().html(text).fadeTo(200, 1);
messageTimer = setTimeout(function() {
sessionStorage.removeItem("waifu-text");
$(".waifu-tips").fadeTo(1000, 0);
}, timeout);
}
}
function initModel(waifuPath, apiPath) {
if (waifuPath === undefined) waifuPath = "";
if (apiPath === undefined) apiPath = "";
apiURL = apiPath;
var modelId = localStorage.getItem("modelId"),
modelTexturesId = localStorage.getItem("modelTexturesId");
if (modelId == null) {
/* 首次访问加载 指定模型 的 指定材质 */
var modelId = 1; // 模型 ID
var modelTexturesId = 53 // 材质 ID
}
loadModel(modelId, modelTexturesId);
$.ajax({
cache: true,
url: waifuPath + "waifu-tips.json",
dataType: "json",
success: function(result) {
$.each(result.mouseover, function(index, tips) {
$(document).on("mouseover", tips.selector, function() {
var text = tips.text;
if (Array.isArray(tips.text)) text = tips.text[Math.floor(Math.random() * tips.text.length)];
text = text.render({
text: $(this).text()
});
showMessage(text, 4000, 8);
});
});
$.each(result.click, function(index, tips) {
$(document).on("click", tips.selector, function() {
var text = tips.text;
if (Array.isArray(tips.text)) text = tips.text[Math.floor(Math.random() * tips.text.length)];
text = text.render({
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 = tips.text;
//if (Array.isArray(tips.text)) text = tips.text[Math.floor(Math.random() * tips.text.length)];
text = text.render({
year: now.getFullYear()
});
//showMessage(text, 7000, true);
messageArray.push(text);
}
});
}
});
}
function loadModel(modelId, modelTexturesId) {
localStorage.setItem("modelId", modelId);
if (modelTexturesId === undefined) modelTexturesId = 0;
localStorage.setItem("modelTexturesId", modelTexturesId);
loadlive2d("live2d", apiURL + "/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: apiURL + "/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: apiURL + "/switch/?id=" + modelId,
dataType: "json",
success: function(result) {
loadModel(result.model["id"]);
showMessage(result.model["message"], 4000, 10);
}
});
}
initModel("/lib/waifu/", "https://api.fghrsh.net/live2d");
});

275
waifu-tips.json Executable file
View File

@ -0,0 +1,275 @@
{
"mouseover": [
{
"selector": ".waifu #live2d",
"text": ["干嘛呢你,快把手拿开", "鼠…鼠标放错地方了!", "你要干嘛呀?", "喵喵喵?", "怕怕(ノ≧∇≦)", "非礼呀!救命!"]
},
{
"selector": ".waifu-tool .fa-home, .menu-item-home",
"text": ["点击前往首页,想回到上一页可以使用浏览器的后退功能哦", "点它就可以回到首页啦!", "回首页看看吧"]
},
{
"selector": ".waifu-tool .fa-comment",
"text": ["猜猜我要说些什么?", "我从青蛙王子那里听到了不少人生经验"]
},
{
"selector": ".waifu-tool .fa-paper-plane",
"text": ["要不要来玩飞机大战?", "这个按钮上写着“不要点击”", "怎么,你想来和我玩个游戏?"]
},
{
"selector": ".waifu-tool .fa-address-book",
"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-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": ".fancybox img",
"text": ["点击图片可以放大呢"]
},
{
"selector": ".highlight-wrap",
"text": ["代码可以直接点击复制哟", "GayHub我是新手"]
},
{
"selector": ".container a[href^='http'], .nav-link .nav-text",
"text": ["要去看看 <span style=\"color:#0099cc;\">{text}</span> 么?", "去 <span style=\"color:#0099cc;\">{text}</span> 逛逛吧"]
},
{
"selector": "a[href^='mailto']",
"text": ["邮件我会及时回复的!", "点击就可以发送邮件啦~"]
},
{
"selector": "a[href^='/tags/']",
"text": ["要去看看 <span style=\"color:#0099cc;\">{text}</span> 标签么?"]
},
{
"selector": "a[href^='/categories/']",
"text": ["要去看看 <span style=\"color:#0099cc;\">{text}</span> 分类么?"]
},
{
"selector": ".post-title-link",
"text": ["要看看 <span style=\"color:#0099cc;\">{text}</span> 这篇文章吗?"]
},
{
"selector": "a[rel='contents']",
"text": ["点击来阅读全文哦"]
},
{
"selector": ".back-to-top",
"text": ["回到开始的地方吧", "又回到最初的起点", "要回到开始的地方么?"]
},
{
"selector": "#rewardButton",
"text": ["我是不是棒棒哒~快给我点赞吧!", "要打赏我嘛?好期待啊~", "主人最近在吃土呢,很辛苦的样子。给他一些钱钱吧~"]
},
{
"selector": "#wechat",
"text": ["这是我的微信二维码~"]
},
{
"selector": "#alipay",
"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": ["留下你的邮箱,不然就是无头像人士了!"]
},
{
"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吗这里有个变态一直在摸我(ó﹏ò。)", "不要摸我了,我会告诉老婆来打你的!", "干嘛动我呀!小心我咬你!", "别摸我,有什么好摸的!"]
}
],"seasons": [
{
"date": "01/01",
"text": "<span style=\"color:#0099cc;\">元旦</span>了呢,新的一年又开始了,今年是{year}年~"
},
{
"date": "02/14",
"text": "又是一年<span style=\"color:#0099cc;\">情人节</span>{year}年找到对象了嘛~"
},
{
"date": "03/08",
"text": "今天是<span style=\"color:#0099cc;\">妇女节</span>"
},
{
"date": "03/12",
"text": "今天是<span style=\"color:#0099cc;\">植树节</span>,要保护环境呀"
},
{
"date": "04/01",
"text": "悄悄告诉你一个秘密~<span style=\"background-color:#34495e;\">今天是愚人节,不要被骗了哦~</span>"
},
{
"date": "05/01",
"text": "今天是<span style=\"color:#0099cc;\">五一劳动节</span>,计划好假期去哪里了吗~"
},
{
"date": "06/01",
"text": "<span style=\"color:#0099cc;\">儿童节</span>了呢,快活的时光总是短暂,要是永远长不大该多好啊…"
},
{
"date": "07/08",
"text": "<span style=\"color:#0099cc;\">2018</span> 年是多久之前来着……123……有好多好多天呢我到主人家这么久啦"
},
{
"date": "08/17",
"text": "难道,是<span style=\"color:#0099cc;\">那位大人</span>降临的日子"
},
{
"date": "09/03",
"text": "<span style=\"color:#0099cc;\">中国人民抗日战争胜利纪念日</span>,铭记历史、缅怀先烈、珍爱和平、开创未来。"
},
{
"date": "09/10",
"text": "<span style=\"color:#0099cc;\">教师节</span>,在学校要给老师问声好呀~"
},
{
"date": "10/01",
"text": "<span style=\"color:#0099cc;\">国庆节</span>新中国已经成立69年了呢"
},
{
"date": "11/05-11/12",
"text": "今年的<span style=\"color:#0099cc;\">双十一</span>是和谁一起过的呢~"
},
{
"date": "12/20-12/31",
"text": "这几天是<span style=\"color:#0099cc;\">圣诞节</span>,主人肯定又去剁手买买买了~"
}
]
}

218
waifu.css Executable file
View File

@ -0,0 +1,218 @@
.waifu {
position: fixed;
bottom: 0;
left: 0;
z-index: 1;
line-height: 0;
transition: all .3s ease-in-out;
-webkit-transform: translateY(3px);
transform: translateY(3px);
}
.waifu:hover {
-webkit-transform: translateY(0);
transform: translateY(0);
}
@media (max-width: 768px) {
.waifu {
display: none;
}
}
.waifu-tips {
opacity: 0;
width: 250px;
min-height: 70px;
margin: 0px 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-delay: 5s;
animation-duration: 50s;
animation-iteration-count: infinite;
animation-name: shake;
animation-timing-function: ease-in-out;
}
.waifu #live2d {
position: relative;
}
.waifu-tool {
color: #aaa;
top: 90px;
right: -10px;
position: absolute;
opacity: 0;
transition: opacity 1s;
}
.waifu:hover .waifu-tool {
opacity: 1;
}
.waifu-tool span {
display: block;
cursor: pointer;
line-height: 24px;
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);
}
}