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

首先科普下什么是Live2D

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

下面是别人博客上看到的

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

还可以换衣服

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

教程很简单

从git上搜live2d-widget

https://github.com/stevenjoezhang/live2d-widget

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

<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

git上的截图如下

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

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

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

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

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

还可以设置日期提醒

可以自定义看板娘说的话

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

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

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

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

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

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

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

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

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

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

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

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

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

一定会把网站做的更好~

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前言 很多小伙伴们都问了本妹子blog右下的卡通人物怎么生成的呢?下面我将简单粗暴滴给小伙伴们介绍下怎么配置二次元...
    前端妹子ice阅读 663评论 0 0
  • 我们平常访问某些网站的时候,会发现在网站上总是悬浮者一个可爱的小人.而且还可以跟用户进行各种互动(说话?).一般这...
    指尖魔法师阅读 15,383评论 2 7
  • 1、line-height有什么作用? 指的是文字之间上下基线的距离,写line-height来让上下文字有不同的...
    StarLikeRain阅读 286评论 0 0
  • 小时候贪玩(那时候应该都贪玩),而爹妈会时不时苦口婆心地劝我去学习,最不济也得读读书嘛,别老耍个没完没了的。 功课...
    李修远阅读 719评论 0 0
  • 注重自己的内心。从自私到慈悲。空性,阿字观,21次禅看清楚生命的真相。被一些事物绑住了自己。智慧,身体不是我的。有...
    chris嘉瑶阅读 243评论 0 0

友情链接更多精彩内容