网页简单Live2D动画插入
《Live2D》是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像，对于以动画风格为主的冒险游戏来说非常有用，缺点是Live 2D人物无法大幅度转身，开发商正设法让该技术可显示360度图像。
效果
代码
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title> title>
<script type="text/javascript" src="http://blog.szwyll.com/wp-content/themes/JieStyle-Two/js/jquery.min.js">script>
head>
<body>
<header id="header">
<div class="waifu" style="transition: all 0.3s ease-in-out 0s;">
<div class="waifu-tips" style="width: 150px; height: 272px; top: -10px; font-size: 14px; opacity: 0;">干嘛呢你，快把手拿开div><canvas id="live2d" class="live2d" width="192" height="240">canvas>
<div class="waifu-tool" style="font-size: 14px;"><span class="fui-home" style="line-height: 16px; display: none;">span> <span class="fui-chat" style="line-height: 16px;">span> <span class="fui-eye" style="line-height: 16px;">span> <span class="fui-user" style="line-height: 16px;">span> <span class="fui-photo" style="line-height: 16px;">span> <span class="fui-info-circle" style="line-height: 16px;">span> <span class="fui-cross" style="line-height: 16px; display: none;">span>div>
div>
header>
<link rel="stylesheet" type="text/css" href="https://live2d.szwyll.com/assets/waifu.min.css?v=1.4.2">
<script type="text/javascript" src="https://live2d.szwyll.com/assets/waifu-tips.js?v=1.4.2">script>
<script type="text/javascript" src="https://live2d.szwyll.com/assets/live2d.min.js?v=1.0.5">script>
<script type="text/javascript">
/* 内置 waifu-tips.json */
initModel({
"waifu": {
"console_open_msg": ["哈哈，你打开了控制台，是想要看看我的秘密吗？"],
"copy_message": ["你都复制了些什么呀，转载要记得加上出处哦"],
"screenshot_message": ["照好了嘛，是不是很可爱呢？"],
"hidden_message": ["我们还能再见面的吧…"],
"load_rand_textures": ["我还没有其他衣服呢", "我的新衣服好看嘛"],
"hour_tips": {
"t5-7": ["早上好！一日之计在于晨，美好的一天就要开始了"],
"t7-11": ["上午好！工作顺利嘛，不要久坐，多起来走动走动哦！"],
"t11-14": ["中午了，工作了一个上午，现在是午餐时间！"],
"t14-17": ["午后很容易犯困呢，今天的运动目标完成了吗？"],
"t17-19": ["傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~"],
"t19-21": ["晚上好，今天过得怎么样？"],
"t21-23": ["已经这么晚了呀，早点休息吧，晚安~"],
"t23-5": ["你是夜猫子呀？这么晚还不睡觉，明天起的来嘛"],
"default": ["嗨~ 快来逗我玩吧！"]
},
"referrer_message": {
"localhost": ["欢迎阅读『", "』", " - "],
"baidu": ["Hello! 来自 百度搜索 的朋友
你是搜索 ", " 找到的我吗？"],
"so": ["Hello! 来自 360搜索 的朋友
你是搜索 ", " 找到的我吗？"],
"google": ["Hello! 来自 谷歌搜索 的朋友
欢迎阅读『", "』", " - "],
"default": ["Hello! 来自 ", " 的朋友"],
"none": ["欢迎阅读『", "』", " - "]
},
"referrer_hostname": {
"blog.szwyll.com": ["小强coding"]
},
"model_message": {
"1": ["来自 Potion Maker 的 Pio 酱 ~"],
"2": ["来自 Potion Maker 的 Tia 酱 ~"]
},
"hitokoto_api_message": {
"lwl12.com": ["这句一言来自 『{source}』", "，是 {creator} 投稿的", "。"],
"fghrsh.net": ["这句一言出处是 『{source}』，是 FGHRSH 在 {date} 收藏的！"],
"jinrishici.com": ["这句诗词出自 《{title}》，是 {dynasty}诗人 {author} 创作的！"],
"hitokoto.cn": ["这句一言来自 『{source}』，是 {creator} 在 hitokoto.cn 投稿的。"]
}
},
"mouseover": [{
"selector": ".container a[href^='http']",
"text": ["要看看 {text} 么？"]
}, {
"selector": ".fui-home",
"text": ["点击前往首页，想回到上一页可以使用浏览器的后退功能哦"]
}, {
"selector": ".fui-chat",
"text": ["一言一语，一颦一笑。一字一句，一颗赛艇。"]
}, {
"selector": ".fui-eye",
"text": ["嗯··· 要切换 看板娘 吗？"]
}, {
"selector": ".fui-user",
"text": ["喜欢换装 Play 吗？"]
}, {
"selector": ".fui-photo",
"text": ["要拍张纪念照片吗？"]
}, {
"selector": ".fui-info-circle",
"text": ["这里有关于我的信息呢"]
}, {
"selector": ".fui-cross",
"text": ["你不喜欢我了吗..."]
}, {
"selector": "#tor_show",
"text": ["翻页比较麻烦吗，点击可以显示这篇文章的目录呢"]
}, {
"selector": "#comment_go",
"text": ["想要去评论些什么吗？"]
}, {
"selector": "#night_mode",
"text": ["深夜时要爱护眼睛呀"]
}, {
"selector": "#qrcode",
"text": ["手机扫一下就能继续看，很方便呢"]
}, {
"selector": ".comment_reply",
"text": ["要吐槽些什么呢"]
}, {
"selector": "#back-to-top",
"text": ["回到开始的地方吧"]
}, {
"selector": "#author",
"text": ["该怎么称呼你呢"]
}, {
"selector": "#mail",
"text": ["留下你的邮箱，不然就是无头像人士了"]
}, {
"selector": "#url",
"text": ["你的家在哪里呢，好让我去参观参观"]
}, {
"selector": "#textarea",
"text": ["认真填写哦，垃圾评论是禁止事项"]
}, {
"selector": ".OwO-logo",
"text": ["要插入一个表情吗"]
}, {
"selector": "#csubmit",
"text": ["要[提交]^(Commit)了吗，首次评论需要审核，请耐心等待~"]
}, {
"selector": ".ImageBox",
"text": ["点击图片可以放大呢"]
}, {
"selector": "input[name=s]",
"text": ["找不到想看的内容？搜索看看吧"]
}, {
"selector": ".previous",
"text": ["去上一页看看吧"]
}, {
"selector": ".next",
"text": ["去下一页看看吧"]
}, {
"selector": ".dropdown-toggle",
"text": ["这里是菜单"]
}, {
"selector": "c-player a.play-icon",
"text": ["想要听点音乐吗"]
}, {
"selector": "c-player div.time",
"text": ["在这里可以调整播放进度呢"]
}, {
"selector": "c-player div.volume",
"text": ["在这里可以调整音量呢"]
}, {
"selector": "c-player div.list-button",
"text": ["播放列表里都有什么呢"]
}, {
"selector": "c-player div.lyric-button",
"text": ["有歌词的话就能跟着一起唱呢"]
}, {
"selector": ".waifu #live2d",
"text": ["干嘛呢你，快把手拿开", "鼠…鼠标放错地方了！"]
}],
"click": [{
"selector": ".waifu",
"text": [
"是…是不小心碰到了吧",
"萝莉控是什么呀",
"你看到我的小熊了吗",
"再摸的话我可要报警了！⌇●﹏●⌇",
"110吗，这里有个变态一直在摸我(ó﹏ò｡)"
]
}],
"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": ["国庆节，新中国已经成立69年了呢"]
}, {
"date": "11/05-11/12",
"text": ["今年的双十一是和谁一起过的呢~"]
}, {
"date": "12/20-12/31",
"text": ["这几天是圣诞节，主人肯定又去剁手买买买了~"]
}]
});
script>
body>
html>