二次元 | 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/[email protected]/autoload.js"></script>

 

 

git上的截圖如下

 

 

下載完項目,裏面有demo,可以本地直接運行。

 

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

但大都不行,本地運行不了,放到服務器上好多都會報錯,還有的有跨域問題。

 

這個是我看到的最理想的一個了,還可以自己配置

我設置的是鼠標放在內容上,會有提示

 

 

 

 

 

還可以設置日期提醒

 

 

可以自定義看板娘說的話

 

 

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

 

PC端移動端都簡單做了自適應

 

 

 

不過感覺移動端效果不太好,遮擋了內容

默認是移動端不顯示的,我故意配置的顯示

 

 

 

我的網站是平時自己用的,做的項目+平時有可能用到的網址

其實就是一個大的收藏夾 (lll¬ω¬)

都是前端寫的,我的計劃是做成活的

(登錄+註冊+添加網址/說明/logo+刪除+修改)

做好的話,用起來挺方便的

 

雖然我能用node/php 簡單的做一些增刪改查

但數據庫和環境實在是難搞.....就沒有進行下一步

以後對這方面掌握的更好的時候,或者碰到一個志同道合的後端的小夥伴

一定會把網站做的更好~