live2d_二次元 | live2d为你的网站博客增加萌萌哒的看板娘

首先科普下什么是Live2D

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

下面是别人博客上看到的

47c30abf0a09ec3b5dac4685676a96d6.png

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

还可以换衣服

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

406e404125ba2364765f6d2061233e28.png

教程很简单

从git上搜 live2d-widget

将这一行代码加入

或 ,即可展现出效果:
4d016c4fe87be031248ee60bcf532b7b.png

git上的截图如下

22479ae733381b7d2c6919e0c8dbf089.png

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

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

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

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

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

92a2dd4e37c32e22e6619bcc7ae7e1d1.png

还可以设置日期提醒

bc61f812c926ec53a800be5ddcee4722.png

可以自定义看板娘说的话

e853e2d34fa8171fdc6239e63c946b57.png

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

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

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

4a21466d736c2e50d42d2ded354c5cf3.png

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

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

b44396d88be06a4d38e7d827e8e4b2e8.png

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

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

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

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

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

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

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

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

一定会把网站做的更好~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值