页面添加面板

页脚添加代码

<div id="page_begin_html">
<!-- 鼠标 -->
<style type="text/css">
* {
cursor: url('https://blog-static.cnblogs.com/files/ogurayui/cursor_icon.ico'), auto;
}
</style>
<script src="https://files.cnblogs.com/files/ogurayui/waifu-tips.js" defer=""></script>
<!-- 鼠标 -->

<!-- 右下角live2d效果 -->
<!-- <script type="text/javascript" charset="utf-8" async="" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js" defer=""></script> -->

<!-- waifu-tips.js 依赖 JQuery 库 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" defer=""></script>
<!-- 实现拖动效果，需引入 JQuery UI -->
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-dist@1.12.1/jquery-ui.min.js" defer=""></script>
<link rel="stylesheet" type="text/css" href="https://live2d-cdn.fghrsh.net/assets/1.4.2/waifu.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" defer=""></script>
<script src="https://live2d-cdn.fghrsh.net/assets/1.4.2/waifu-tips.min.js" defer=""></script>
<script src="https://live2d-cdn.fghrsh.net/assets/1.4.2/live2d.min.js" defer=""></script>

</div>

<script type="text/javascript">
setTimeout(() => {
L2Dwidget.init({
"model": {
"scale": 0.5
},
"display": {
"position": "right",
"width": 131.25,
"height": 195,
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
}, 600)
</script>

<div class="waifu ui-draggable ui-draggable-handle" style="left: 0px;">
<div class="waifu-tips" style=" 285px; height: 75px; top: -60px; font-size: 15px; opacity: 0;">鼠…鼠标放错地方了！</div>
<canvas id="live2d" class="live2d" width="300" height="267.5"></canvas>
<div class="waifu-tool" style="font-size: 18px;">
<span class="fui-home" style="line-height: 25px; display: none;"></span>
<span class="fui-chat" style="line-height: 25px;"></span>
<span class="fui-eye" style="line-height: 25px;"></span>
<span class="fui-user" style="line-height: 25px;"></span>
<span class="fui-photo" style="line-height: 25px;"></span>
<span class="fui-info-circle" style="line-height: 25px;"></span>
<span class="fui-cross" style="line-height: 25px; display: none;"></span>
</div>
</div>

<script type="text/javascript">
setTimeout(() => {
/* 可直接修改部分参数 */
live2d_settings['modelId'] = 6; // 默认模型 ID
live2d_settings['modelTexturesId'] = 8; // 默认材质 ID
live2d_settings['modelStorage'] = false; // 不储存模型 ID
live2d_settings['canCloseLive2d'] = false; // 隐藏 关闭看板娘 按钮
live2d_settings['canTurnToHomePage'] = true; // 隐藏 返回首页 按钮
live2d_settings['waifuSize'] = '300x267.5'; // 看板娘大小
live2d_settings['waifuTipsSize'] = '285x25'; // 提示框大小
live2d_settings['waifuFontSize'] = '10px'; // 提示框字体
live2d_settings['waifuToolFont'] = '14px'; // 工具栏字体
live2d_settings['waifuToolLine'] = '25px'; // 工具栏行高
live2d_settings['waifuToolTop'] = '-30px'; // 工具栏顶部边距
live2d_settings['waifuDraggable'] = 'axis-x'; // 拖拽样式
/* 在 initModel 前添加 */
initModel("https://live2d-cdn.fghrsh.net/assets/1.4.2/waifu-tips.json");
}, 500)
</script>

　

背景图片

body {
color: #000;
background: url(https://images.cnblogs.com/cnblogs_com/php-linux/674292/o_18381483.jpg) fixed;
background-size: 100%;
background-repeat: no-repeat;
font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
font-size: 12px;
min-height: 101%;
}
#home {
opacity: 0.8;
margin: 0 auto;
64%;
min- 950px;
background-color: #fff;
padding: 30px;
margin-top: 30px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}