给博客添加一个摇头晃脑的萌妹子的JS代码

摘要: 经常看到有的博客打开,左下角或者右下角有一个摇头晃脑的萌妹子,这其实是用js实现的。里面有很多效果. 这里贴个代码,有时间也加入到我的博客做个测试

经常看到有的博客打开,左下角或者右下角有一个摇头晃脑的萌妹子,这其实是用js实现的。里面有很多效果. 这里贴个代码,有时间也加入到我的博客做个测试.

效果如下:

<html>
<head>
  
</head>
<body>
 <div id="live2d-widget"><canvas id="live2dcanvas" width="300" height="600" style="position: fixed;opacity: 0.7;right: 0px;bottom: -20px;z-index: 99999;pointer-events: none;border: 0px dashed rgb(204, 204, 204);"></canvas></div>
 <script type="text/javascript" charset="utf-8" async="" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.0.min.js"></script>
 <script type="text/javascript"  src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616"></script>

<script type="text/javascript">
  var path1 = "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json";
    var path2 = "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json";
	var path3 = "https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json";
    L2Dwidget.init({
	  "model": {jsonPath: path2,"scale": 1},
      "display": {
        "superSample": 2,
        "width": 200,//宽度
        "height": 300,//高度
        "position": "left",//位置,right,left
        "hOffset": 0,
        "vOffset": 0
      }
   });
</script>
</body>
</html>

参考文章:https://www.cnblogs.com/w821759016/p/12510495.html

上一篇: Vue axios与spring boot(mvc)通信交互的两种方式
下一篇: Centos下yum 安装nginx
 评论 ( What Do You Think )
名称
邮箱
网址
评论
验证
   
 

 


  • 微信公众号

  • 我的微信

站点声明:

1、一号门博客CMS,由Python, MySQL, Nginx, Wsgi 强力驱动

2、部分文章或者资源来源于互联网, 有时候很难判断是否侵权, 若有侵权, 请联系邮箱:summer@yihaomen.com, 同时欢迎大家注册用户,主动发布无版权争议的 文章/资源.

3、鄂ICP备14001754号-3, 鄂公网安备 42280202422812号