尘叶心繁

网页萝莉福利 [嘻嘻嘻]

电脑版发表于:2019/8/26 12:00

先来看看效果图:

是不是很nice呀

index.html

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Swap div element JS</title>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Comfortaa:400,700,300" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<head>
    <meta charset="UTF-8">
    <title>Live2d Test Env</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" charset="utf-8" async="" src="https://l2dwidget.js.org/lib/L2Dwidget.0.min.js"></script>
<style>
  .live2d-widget-dialog-container {
    width: 300px;
    height: 120px;
    position: absolute;
    bottom: 65%;
    right: 0px;
    transform-origin: right;
    padding: 12px;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
  }
  .live2d-widget-dialog {
    width: 100%;
    height: 100%;
    color: #917159;
    font-size: 16px;
    padding: 12px;
    border: 2px solid rgb(236, 203, 180);
    background: rgb(252, 248, 244);
    box-sizing: border-box;
    border-radius: 10px;
    transform: rotate(-2deg);
    opacity: 0;
    transition: 200ms opacity;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    animation: live2d-widget-dialog-tingle 4s ease-in-out 0s infinite alternate;
  }
  @keyframes live2d-widget-dialog-tingle {
    0% { transform: translate(-1px, 1.5px) rotate(-2deg); }
    100% { transform: translate(1px, -1.5px) rotate(2deg); }
  }
</style>
</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="190" height="180">
      <polygon points="100,0 160,180 10,60 190,60 40,180" style="fill:yellow;stroke:yellow;stroke-width:1;"></polygon>
    </svg>
    <script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
    <script type="text/javascript">
      L2Dwidget
        .on('*', (name) => {
          console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')
        })
        .init({
          dialog: {
            // 开启对话框
            enable: true,
            script: {
              // 每空闲 10 秒钟,显示一条一言
              'every idle 10s': '$hitokoto$',
              // 当触摸到星星图案
              'hover .star': '星星在天上而你在我心里 (*/ω\*)',
              // 当触摸到角色身体
              'tap body': '哎呀!别碰我!',
              // 当触摸到角色头部
              'tap face': '人家已经不是小孩子了!'
            }
          }
        });
    </script>
  

<div id="live2d-widget" style="position: fixed; right: 0px; bottom: -20px; width: 200px; height: 400px; z-index: 99999; opacity: 1; pointer-events: none;"><div style="transform: scale(0.8);"><div style="opacity: 0;">大家互相帮助,一起成功,一起幸福什么的,不过是种理想。</div></div><canvas id="live2dcanvas" width="400" height="800" style="position: absolute; left: 0px; top: 0px; width: 200px; height: 400px;"></canvas></div></body>
<!-- partial -->
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>

</body>
</html>

style.css:

#ad {
  padding: 20px;
  background: #cccccc;
  width: 300px;
  height: 250px;
}


官方api:https://l2dwidget.js.org/docs/source.html

网友的一些api:https://www.cnblogs.com/dxdblog/p/10255503.html

                        https://blog.csdn.net/u012931864/article/details/83054822

如果你要自己制作的化:给博客添加能动的看板娘(Live2D)-模型格式v3转v2 - 猫与向日葵

关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢