tnblog
首页
视频
资源
登录
原

网页萝莉福利 [嘻嘻嘻]

8396人阅读 2019/8/26 12:00 总访问：3465081 评论：0 收藏：0 手机
分类: .net后台框架

先来看看效果图：

是不是很nice呀

index.html

  1. <!DOCTYPE html>

  2. <html >

  3. <head>

  4.   <meta charset="UTF-8">

  5.   <title>Swap div element JS</title>

  6.       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  7.     <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

  8.     <link href="https://fonts.googleapis.com/css?family=Comfortaa:400,700,300" rel="stylesheet" type="text/css">

  9. <link rel="stylesheet" href="./style.css">

  10. </head>

  11. <body>

  12. <!-- partial:index.partial.html -->

  13. <head>

  14.     <meta charset="UTF-8">

  15.     <title>Live2d Test Env</title>

  16.     <meta http-equiv="X-UA-Compatible" content="IE=edge">

  17.     <meta name="viewport" content="width=device-width, initial-scale=1">

  18.   <script type="text/javascript" charset="utf-8" async="" src="https://l2dwidget.js.org/lib/L2Dwidget.0.min.js"></script>

  19. <style>

  20.   .live2d-widget-dialog-container {

  21.     width: 300px;

  22.     height: 120px;

  23.     position: absolute;

  24.     bottom: 65%;

  25.     right: 0px;

  26.     transform-origin: right;

  27.     padding: 12px;

  28.     box-sizing: border-box;

  29.     -webkit-font-smoothing: antialiased;

  30.   }

  31.   .live2d-widget-dialog {

  32.     width: 100%;

  33.     height: 100%;

  34.     color: #917159;

  35.     font-size: 16px;

  36.     padding: 12px;

  37.     border: 2px solid rgb(236, 203, 180);

  38.     background: rgb(252, 248, 244);

  39.     box-sizing: border-box;

  40.     border-radius: 10px;

  41.     transform: rotate(-2deg);

  42.     opacity: 0;

  43.     transition: 200ms opacity;

  44.     box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;

  45.     animation: live2d-widget-dialog-tingle 4s ease-in-out 0s infinite alternate;

  46.   }

  47.   @keyframes live2d-widget-dialog-tingle {

  48.     0% { transform: translate(-1px, 1.5px) rotate(-2deg); }

  49.     100% { transform: translate(1px, -1.5px) rotate(2deg); }

  50.   }

  51. </style>

  52. </head>

  53. 

  54. <body>

  55.     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="190" height="180">

  56.       <polygon points="100,0 160,180 10,60 190,60 40,180" style="fill:yellow;stroke:yellow;stroke-width:1;"></polygon>

  57.     </svg>

  58.     <script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>

  59.     <script type="text/javascript">

  60.       L2Dwidget

  61.         .on('*', (name) => {

  62.           console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')

  63.         })

  64.         .init({

  65.           dialog: {

  66.             // 开启对话框

  67.             enable: true,

  68.             script: {

  69.               // 每空闲 10 秒钟，显示一条一言

  70.               'every idle 10s': '$hitokoto$',

  71.               // 当触摸到星星图案

  72.               'hover .star': '星星在天上而你在我心里 (*/ω＼*)',

  73.               // 当触摸到角色身体

  74.               'tap body': '哎呀！别碰我！',

  75.               // 当触摸到角色头部

  76.               'tap face': '人家已经不是小孩子了！'

  77.             }

  78.           }

  79.         });

  80.     </script>

  81.   

  82. 

  83. <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>

  84. <!-- partial -->

  85.   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>

  86. <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>

  87. 

  88. </body>

  89. </html>

style.css:

  1. #ad {

  2.   padding: 20px;

  3.   background: #cccccc;

  4.   width: 300px;

  5.   height: 250px;

  6. }


官方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 - 猫与向日葵


欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

评价

[ERROR] ionic-app-scripts has unexpectedly closed (exit code 1). The Ionic CLI will exit
运行ionic有时候缺失或者被弃用掉 ionic-app-scripts报错信息：解决方法：安装这玩意npm install @ionic/app-scripts@lates...

ASP.NET Core 依赖注入（基础）[学习笔记]
ASP.NET Core 依赖注入（基础）[学习笔记][TOC] 环境准备 项目结构 服务类 GenericService.cs public...

ASP.NET Core 作用域与对象释放行为 （基础）[学习笔记]
ASP.NET Core 作用域与对象释放行为 （基础）[学习笔记][TOC] 知识大纲 作用域 IServiceScope 实现IDisposable接...

win mq 启动时候 Failed to create cookie file '[location of ".erlang.cookie"]/.erlang.cookie': enoent

当使用命令出现一下问题的时候：win mq 启动时候 Failed to create cookie file ‘[location of “.erlang.cookie”]/.erla...

C8.0 新语法特性 ??= [..]
C#8.0 部分语法特性Null 合并赋值List&lt;int&gt; numbers = null; int? i = null; numbers ??= new List&lt;int&gt...

Cordova已经安装报错[ERROR] Cannot load Cordova config.
明明是已经安装了 ，但是硬是用不了 解决方案：执行：ionic integrations enable cordova --add

consul config: Unknown extra arguments: [dev]
consul无法启动拨错：consul config: Unknown extra arguments: [dev]通常是因为使用powershell才会报这个错，换成cmd只写...

[Vue warn]: Failed to mount component: template or render function not defined
检查一下是不是根目录没有template标签，直接写view就会报错

[ERROR FileContent--proc-sys-net-bridge-bridge-nf-call-iptables]:K8S安装失败

安装k8s执行：kubeadm init报错 报错： [ERROR FileContent—proc-sys-net-bridge-bridge-nf-call-iptables]: /proc/sys/...

dm达梦数据库查询报错，无效的表或视图名[WAC_USERS]
dm达梦数据库查询报错：无效的表或视图名[WAC_USERS]如果表明明有还报这个错 试试加上数据库的名称 select * from PERSON...

The JSON value could not be converted to System.Nullable`1[System.Decimal]。前台给后台int?Decimal?传递参数问题，后台无法接收空参数，无法接收到应该为null的参数
前台传递的参数到后台报错：The JSON value could not be converted to System.Nullable`1[System.Decimal] 这个是因为前...

nginx重启，启动，退出报错 nginx: [error] CreateFile() "C:\installs\nginx-1.12.2/logs/nginx.pid" failed (2: The system cannot f
这个就是因为nginx nginx.pid文件丢失报错导致的。这个错误会导致不管是重启，启动，退出都会报错。 解决方法如下1：在对...
这一世以无限游戏为使命！
博主信息
排名
2
文章
633
粉丝
44
评论
93
文章类别
最新文章
最新评价
docker中Sware集群与service
尘叶心繁 : 想学呀！我教你呀
一个bug让程序员走上法庭 索赔金额达400亿日元
叼着奶瓶逛酒吧 : 所以说做程序员也要懂点法律知识
.net core 塑形资源
剑轩 : 收藏收藏
映射AutoMapper
剑轩 : 好是好，这个对效率影响大不大哇,效率高不高
ASP.NET Core 服务注册生命周期
剑轩 : http://www.tnblog.net/aojiancc2/article/details/167
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术