看板娘demo,学会了可以方便的给自己的博客添加一个看板娘

文件下载

        由于文件代码有点多所以,放一个网盘链接

链接:https://pan.baidu.com/s/1qiFDWN-bMzq6zKpytvuzeA
提取码:ajcm

demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Live2D</title>
	<link rel="stylesheet" type="text/css" href="./assets/waifu1.css" />
	<link rel="stylesheet" type="text/css" href="./assets/flat-ui.min.css" />

	<!-- 使用下面的两个可以实现一种  github地址 https://github.com/stevenjoezhang/live2d-widget -->
	<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
	<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script> -->

</head>

<body>
	<div class="waifu" id="waifu">
		<div class="waifu-tips" style="opacity: 1;"></div>
		<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
		<div class="waifu-tool">
			<span class="fui-home"></span>
			<span class="fui-chat"></span>
			<span class="fui-eye"></span>
			<span class="fui-user"></span>
			<span class="fui-photo"></span>
			<span class="fui-info-circle"></span>
			<span class="fui-cross"></span>
		</div>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="./assets/live2d.js"></script>
	<script src="./assets/waifu-tips.js"></script>
	<script type="text/javascript">initModel()</script>
</body>

</html>

文件目录

看板娘demo,学会了可以方便的给自己的博客添加一个看板娘

结果

看板娘demo,学会了可以方便的给自己的博客添加一个看板娘

        用这种方法请配合这篇文章使用 本地测试demo时看板娘的图片显示不出来,解决办法

第二种不用下载文件

        这个也可以,用起来还行,直接引用别人 cdn 的文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Live2D</title>

	<!-- 使用下面的两个可以实现一种  github地址 https://github.com/stevenjoezhang/live2d-widget -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
	<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

</head>

<body>

</body>

</html>

效果

看板娘demo,学会了可以方便的给自己的博客添加一个看板娘

最后碎碎念

        两种办法都可以实现换装,换人,拍照,建议自己都玩玩看看效果,第二种方法,建议自己去把代码下载下来,放到自己的 cdn 上,免得别人的突然没了

上一篇:DAY 43 前端


下一篇:安卓工作室 Android studio 或 Intellij IDEA 美化 修改 汉化 酷炫 装逼 Android studio or Intellij IDEA beautify modify Chinesization cool decoration