看板娘demo，學會了可以方便的給自己的部落格新增一個看板娘
阿新 • • 發佈：2021-06-18
檔案下載
由於檔案程式碼有點多所以，放一個網盤連結
連結：https://pan.baidu.com/s/1qiFDWN-bMzq6zKpytvuzeA
提取碼：ajcm
demo
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Live2D</title> <link rel="stylesheet" type="text/css" href="./assets/waifu1.css" /> <link rel="stylesheet" type="text/css" href="./assets/flat-ui.min.css" /> <!-- 使用下面的兩個可以實現一種 github地址 https://github.com/stevenjoezhang/live2d-widget --> <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"> <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script> --> </head> <body> <div class="waifu" id="waifu"> <div class="waifu-tips" style="opacity: 1;"></div> <canvas id="live2d" width="280" height="250" class="live2d"></canvas> <div class="waifu-tool"> <span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="./assets/live2d.js"></script> <script src="./assets/waifu-tips.js"></script> <script type="text/javascript">initModel()</script> </body> </html>
檔案目錄
結果
用這種方法請配合這篇文章使用 本地測試demo時看板孃的圖片顯示不出來，解決辦法
第二種不用下載檔案
這個也可以，用起來還行，直接引用別人 cdn 的檔案
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Live2D</title> <!-- 使用下面的兩個可以實現一種 github地址 https://github.com/stevenjoezhang/live2d-widget --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"> <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script> </head> <body> </body> </html>
效果
最後碎碎念
兩種辦法都可以實現換裝，換人，拍照，建議自己都玩玩看看效果，第二種方法，建議自己去把程式碼下載下來，放到自己的 cdn 上，免得別人的突然沒了