博客园添加看板娘 鼠标添加点击特效
1.首先你得先申请JS权限 (重中之重)
2.下载几个文件,上传到自己博客文件中 (打开之后右键另存为就可以了)
waifu1.css 人物显示在右下角 (看自己喜好,链接不同的文件就行了)
waifu.css 人物显示在左下角
3.然后在设置里面找到博客侧边栏公告,复制下面代码进去即可
<!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/自己博客地址/waifu1.css"/> <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/自己博客地址/flat-ui.min.css"/> <script src="https://files.cnblogs.com/files/自己博客地址/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://files.cnblogs.com/files/自己博客地址/live2d.min.js"></script> <script src="https://files.cnblogs.com/files/自己博客地址/waifu-tips.js"></script> <script type="text/javascript">initModel()</script> </body> </html>
最后刷新即可看到萌萌的看板娘
2.添加鼠标点击特效 特效放到页脚HTML代码里面
第一种
<script type="text/javascript"> /* 鼠标特效 */ var a_idx = 0; jQuery(document).ready(function($) { $("body").click(function(e) { var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤","❤客官如果喜欢请点个赞吧❤","❤爱你哦❤"); 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-20, "position": "absolute", "font-weight": "bold", "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")" }); $("body").append($i); $i.animate({ "top": y - 200, "opacity": 0 }, 1500, function() { $i.remove(); }); }); }); </script>
第二种 烟花特效
<script src="https://files.cnblogs.com/files/qq2351194611/mouse-click.js"></script> <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
