博客園美化——看板娘

時間 2019-11-19

標籤博客美化简体版

原文原文鏈接

一直有人問我左下角的看板娘是怎麼加上去的javascript

剛開始看別人的隨筆看得一臉懵逼，本身搗鼓個很久才弄好的css

因而就想寫一篇容易看懂的隨筆html

1.下載模型相關文件（點擊推薦和關注才能下載哦QWQ）java

打開壓縮包後就是這麼一堆東西jquery

2.將文件上傳到博客園canvas

只要上傳ui

waifu.css
waifu-tips.js
live2d.js

3.代碼實現spa

<!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="https://files.cnblogs.com/files/kousak/waifu.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/kousak/waifu.css">
    <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://files.cnblogs.com/files/kousak/live2d.js"></script>
    <script src="https://files.cnblogs.com/files/kousak/waifu-tips.js"></script>
    <script type="text/javascript">initModel()</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

注意：將文件地址換成本身文件的地址cdn

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。