其他分享
首页 > 其他分享> > 看板娘demo，学会了可以方便的给自己的博客添加一个看板娘

看板娘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时看板娘的图片显示不出来，解决办法

第二种不用下载文件

        这个也可以，用起来还行，直接引用别人 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>

效果

在这里插入图片描述

最后碎碎念

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

标签：看板娘,文件,demo,cdn,博客,Live2D,下载
来源： https://blog.csdn.net/qq_43657442/article/details/118018123