WordPress网站如何设置网页特效live2d看板娘

Ourboke
Ourboke
Ourboke
578
文章
147
评论
2021年8月13日08:14:54
评论
55

今天无意中看到鸟哥更新了一个教程,网页特效live2d看板娘,感觉效果还挺不错的。不过,这个特效适合那些总喜欢花里胡哨的朋友们,至于喜欢简洁且不想该站点那么卡顿的朋友们可以放弃了。

网页特效live2d看板娘

其实WordPress网站实现网页特效live2d看板娘的操作方法也很简单,只需简单的几行代码便可轻松搞定。该人物会跟随你的鼠标动,超级可爱!

将下面代码添加到网页适当位置即可

一、无参数默认显示在右下:

<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$',
          // 当触摸到角色身体
          'tap body': '哎呀!别碰我!',
          // 当触摸到角色头部
          'tap face': '人家已经不是小孩子了!'
        }
      }
    });
</script>

二、带参数适合显示在左下:

<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({
		display: {
			// 居左
			"position": "left",
			// 宽度
			"width": 200,
			// 高度
			"height": 400,
			// 距左右
			"hOffset": 35,
			// 距下
			"vOffset": -20
		},
 
		mobile: {
			// 移动端,false为关闭
			"show": true,
			"scale": 0.5
		},
 
		dialog: {
		// 开启对话框,false为关闭
			enable: true,
			script: {
				// 每空闲 10 秒钟,显示一条一言
				'every idle 10s': '$hitokoto$',
				// 当触摸到角色身体
				'tap body': '哎呀!别碰我!',
				// 当触摸到角色头部
				'tap face': '人家已经不是小孩子了!'
			}
		}
	});
</script>

因为本人不是很喜欢这种特效,所以没有添加在本站之中,想看实际演示效果的朋友们可以移步到:https://l2dwidget.js.org/dev.html

茫茫人海能够相遇便是缘分,但请记住;尊重每一份辛勤的汗水,所以转载请注明出处,谢谢!
Ourboke
  • 本文由 发表于 2021年8月13日08:14:54
  • 转载请务必保留本文链接:https://www.ourboke.com/2975.html
如何为WordPress页面链接添加.html后缀 WordPress

如何为WordPress页面链接添加.html后缀

做从事SEO行业的朋友想必对.html链接后缀都不陌生,因为想要做好优化是需要更好的把所有页面都设置成.html链接后缀,否则,在日后的优化道路上就会越发困难。 如何为WordPres...
如何将WordPress文章导入到Excel表格? WordPress

如何将WordPress文章导入到Excel表格?

近期,有个朋友突发奇想,如何将WordPress文章导入到Excel表格?真的是世上千奇百怪想法的人还真是不少。其实说来方法也并不难,只需一个简单的插件:Export To Excel ...
WordPress网站CDN动静态分离加速该怎样实现? WordPress

WordPress网站CDN动静态分离加速该怎样实现?

近期这段时间一直在钻研WordPress网站动静态分离加速该怎样实现,来实现网页加速的效果,因为起初本人理解力的情况,致使走了许多坑,致使到前些日子才把这个弄好。为了能钻研动静态分离,乃至夜晚下班回家...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: