Widget:页面Live2D

<style> @supports (min(0px)) {

 #live2dL {
   margin-left: min(calc(0px - (((100vw - 1160px - 60px * 2) / 2 - 240px) / 2 + 60px + 240px)), calc(0px - (60px + 240px)));
 }
 #live2dR {
   margin-left: max(calc(((100vw - 1160px - 60px * 2) / 2 - 240px) / 2 + 1160px + 60px), calc(1160px + 60px));
 }

} @supports not (min(0px)) {

 #live2dL {
   margin-left: calc(0px - (60px + 240px));
 }
 #live2dR {
   margin-left: calc(1160px + 60px);
 }

} .live2d {

  position: fixed;
  bottom: 36px;
  width: 240px;
  height: 320px;

} </style> <canvas id="live2dL" class="live2d"></canvas> <canvas id="live2dR" class="live2d"></canvas> <script src="https://cdn.jsdelivr.net/gh/WankkoRee/nofland-spine@v1.2.1/spine-webgl.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/WankkoRee/nofland-spine@v1.2.1/live2d.js"></script> <script>

   $(() => {
       new NoflandSpineLive2D($("#live2dL"), "帕修姆"); // 参数elem:用于绘制的canvas;参数name:妖精或人物名字,与json中alias字段匹配
       new NoflandSpineLive2D($("#live2dR"), "露西姆"); // 参数elem:用于绘制的canvas;参数name:妖精或人物名字,与json中alias字段匹配
   });

</script>