live2d web 看板娘

作者:辰風(fēng)沐陽 閱讀:2120 發(fā)布時間:2020-07-01 上次更新:2020-07-01

看板娘是一種職業(yè)和習(xí)慣稱呼,也是ACGN次文化中的萌屬性之一。簡而言之就是小店的女服務(wù)生,也有“吸引顧客,招攬生意,提高人氣”等作用類似品牌形象代言人的含義。

1. 訪問巨佬網(wǎng)站,下載壓縮包


https://www.jsdelivr.com/package/npm/live2d-widget

2. 解壓壓縮包,復(fù)制 lib 目錄下的四個文件


3. 引入 兩個js 文件,加一句css代碼


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>live2d 看板娘</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <style>
  7. #live2dcanvas {
  8. border: 0 !important;
  9. }
  10. </style>
  11. <script src="js/L2Dwidget.0.min.js"></script>
  12. <script src="js/L2Dwidget.min.js"></script>
  13. </head>
  14. <body>
  15. <script>
  16. /* 這個script就寫在html里面,千萬不要把它加入引用文件,
  17. 因為它需要等頁面渲染完畢再執(zhí)行,不然可愛的看板娘不會出來哦 */
  18. L2Dwidget.init({
  19. display: {
  20. superSample: 2,
  21. width: 150,
  22. height: 400,
  23. position: "left",
  24. hOffset: 0,
  25. vOffset: 0,
  26. },
  27. });
  28. </script>
  29. </body>
  30. </html>

4. 效果如下圖


5. 下載 看板娘壓縮包本文示例源碼


鏈接: https://pan.baidu.com/s/1HlRCRtMKBk8Hoe4C2RKkQA 提取碼: kh52

標(biāo)簽: 看板娘