1.設置動畫首先要申請權限
1.1首先進入[我的博客園]，進入[管理]中的[設置]
1.2找到[博客側邊欄公告]，並點擊[申請JS權限]
1.3編寫申請js權限內容（示例如下）
尊敬的博客園管理員：
請問是否可以幫我開通js權限，我想對文章的樣式和布局需要js代碼進行調整外觀。
謝謝您的幫助。
尊敬的博客園管理員：
您好，我希望用JS美化下我的博客頁面，麻煩通過下我的JS權限申請。
謝謝您的幫助。
ps：在申請時，要耐心等待，審核不通過可以多換幾個內容試試，我是一次就通過了，大概等了1個小時左右 ^-^ ^-^
1.4通過審核的狀態，下面就可以開始設置動態效果了！！
2.背景的動態線狀粒子特效
2.1鼠標停置，會自動吸附線條，效果圖如下
2.2首先導入js文件，在這里選擇文件——上傳就可以了，或者直接用我的src路徑（這一步主要是為了給動畫js的路徑）
js文件連接，復制鏈接，我的js地址：https://files.cnblogs.com/files/liyhbk/js.js
2.3如果自己上傳了文件，獲取連接，則將src路徑變成自己的
github地址自己可以下載：https://github.com/hustcc/canvas-nest.js/tree/758ef1540b4a9364a211665eb334b514305b9b07
2.4把這段代碼復制到————頁腳 HTML 代碼中
<!-- 線條背景動畫 -->
<script src="https://files.cnblogs.com/files/liyhbk/js.js" color="0,0,255" opacity="1" count="119" zindex="-2">
</script>
2.5參數
- color: 線條顏色，默認：‘0，0，0’；三個數字分別為(R,G,B),注意使用，分割
- opacity: 線條透明度0~1,默認0.5
- count: 線條總數量，默認99
- z-Index: 背景的z-Index屬性，css用於控制所在層的位置，默認-1
3.通知欄公告live2D動畫
3.1效果圖如下：
3.2將此代碼貼入側邊公告欄中
<!--公告處的人物 --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="textml; charset=UTF-8" /> <title>Live2D</title> <link rel="stylesheet" type="texts" href="https://blog-static.cnblogs.com/files/monster-jian/waifu.css"/> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.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://blog-static.cnblogs.com/files/monster-jian/live2d.min.js"></script> <script src="https://blog-static.cnblogs.com/files/monster-jian/waifu-tips.js"></script> <script type="text/javascript">initModel()</script>
<link rel="stylesheet" type="texts" href="https://blog-static.cnblogs.com/files/monster-jian/flat-ui.min.css"/>
</body>
4.鼠標點擊愛心特效
4.1效果圖如下：
4.2將此代碼貼入——頁腳 HTML 代碼
<!--點擊愛心特效--> <script type="text/javascript"> //需要jquery插件 /* 鼠標特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("❤不做咸魚！❤","❤拒絕懶惰！❤","❤想做吃貨❤","❤向大佬學習❤","❤扶我起來~❤","❤come on❤","❤一直在路上~❤","❤累了~❤","❤再趴一會❤","❤66666❤","❤高興的飛起*****❤"); var $i = $("<span></span>").text(a[a_idx]); a_idx = (a_idx + 1) % a.length; var x = e.pageX, y = e.pageY; $i.css({ "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y - 20, "left": x, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 180, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script>
5.鼠標點擊火花特效
5.1效果圖如下：
5.2將此代碼貼入——頁腳 HTML 代碼（接着之前的粘貼就行）
<!--點擊火花特效--> <script src="https://files.cnblogs.com/files/monster-jian/mouse-click.js"></script> <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
6.鼠標樣式動畫
6.1效果如下
6.2將此代碼貼入——頁面定制 CSS 代碼 中
/*鼠標樣式動畫*/ body{ background-repeat: repeat; background-attachment: fixed; background-size:cover; cursor: url(https://files.cnblogs.com/files/monster-jian/cursor.ico),auto; }
7.鼠標樣式動畫
7.1效果如下，在頁面左下角有人物
7.2將此代碼貼入——頁腳 HTML 代碼中
<!--右下角人物 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<!--小帥哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json-->
<!--萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json-->
<!--小可愛（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json-->
<!--小可愛（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json-->
<!--初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json-->
<!-- 上邊的不同鏈接顯示的是不同的小人，這個可以根據需要來選擇 下邊的初始化部分，可以修改寬高來修改小人的大小，或者是鼠標移動到小人上的透明度，也可以修改小人在頁面出現的位置。 -->
<script>
/*https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json*/
L2Dwidget.init({ "model": { jsonPath:
"https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",
"scale": 1 }, "display": { "position": "left", "width": 66, "height": 88,
"hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 },
"react": { "opacityDefault": 0.8, "opacityOnHover": 0.1 } });
</script>
7.3根據自己的喜好，修改展示內容
8.快速推薦
效果圖如下：
代碼：
/*快速推薦*/ #div_digg { position: fixed; bottom: 10px; right: 15px; border: 2px solid #ECD7B1; padding: 10px; width: 140px; background-color: #fff; border-radius: 5px 5px 5px 5px !important; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); }
9.完成樣式展示
10.以上幾種樣式中的URL，src 有帶js文件，都是自己的文件路徑，都可復制鏈接另尋為自己的js文件或其他格式文件，上傳到自己的文件中，如圖所示：
