首先科普下什么是Live2D

来源百度百科:Live2D是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像,对于以动画风格为主的冒险游戏来说非常有用,缺点是Live 2D人物无法大幅度转身,开发商正设法让该技术可显示360度图像。

下面是别人博客上看到的

免费二次元门户网站(二次元live2d为你的网站博客增加萌萌哒的看板娘)(1)

这是我网站上的看板娘,可以变身,有好几种样式

还可以换衣服

眼睛会跟着你的鼠标,超级可爱~

免费二次元门户网站(二次元live2d为你的网站博客增加萌萌哒的看板娘)(2)

教程很简单

从git上搜 live2d-widget

将这一行代码加入 <head> 或 <body>,即可展现出效果:

免费二次元门户网站(二次元live2d为你的网站博客增加萌萌哒的看板娘)(3)

git上的截图如下

免费二次元门户网站(二次元live2d为你的网站博客增加萌萌哒的看板娘)(4)

下载完项目,里面有demo,可以本地直接运行。

我之前也找过不少live2d的教程

但大都不行,本地运行不了,放到服务器上好多都会报错,还有的有跨域问题。

这个是我看到的最理想的一个了,还可以自己配置

我设置的是鼠标放在内容上,会有提示

免费二次元门户网站(二次元live2d为你的网站博客增加萌萌哒的看板娘)(5)

还可以设置日期提醒

免费二次元门户网站(二次元live2d为你的网站博客增加萌萌哒的看板娘)(6)

可以自定义看板娘说的话

免费二次元门户网站(二次元live2d为你的网站博客增加萌萌哒的看板娘)(7)

可以去我的网站看效果 www.imdlq.com

点击底部的 阅读原文 也可以访问

PC端移动端都简单做了自适应

免费二次元门户网站(二次元live2d为你的网站博客增加萌萌哒的看板娘)(8)

不过感觉移动端效果不太好,遮挡了内容

默认是移动端不显示的,我故意配置的显示

免费二次元门户网站(二次元live2d为你的网站博客增加萌萌哒的看板娘)(9)

我的网站是平时自己用的,做的项目 平时有可能用到的网址

其实就是一个大的收藏夹 (lll¬ω¬)

都是前端写的,我的计划是做成活的

(登录 注册 添加网址/说明/logo 删除 修改)

做好的话,用起来挺方便的

虽然我能用node/php 简单的做一些增删改查

但数据库和环境实在是难搞.....就没有进行下一步

以后对这方面掌握的更好的时候,或者碰到一个志同道合的后端的小伙伴

一定会把网站做的更好~

,