博客园背景页面动态特效

  • A+
所属分类:Web前端
摘要

ps :在申请时,要耐心等待,审核不通过可以多换几个内容试试,我是一次就通过了,大概等了1个小时左右 ^-^ ^-^


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://blog-static.cnblogs.com/files/liyhbk/canvas-nest.js

2.3如果自己上传了文件,获取连接,则将src路径变成自己的

博客园背景页面动态特效

2.4把这段代码复制到————页首 HTML 代码中

<!-- 线条背景动画 --> <script type="text/javascript"  color="0,0,0" opacity='1' zIndex="-2" count="100000"  src="https://blog-static.cnblogs.com/files/liyhbk/canvas-nest.js"></script>

博客园背景页面动态特效

2.5参数

  • color: 线条颜色,默认:‘0,0,0’;三个数字分别为(R,G,B),注意使用,分割
  • opacity: 线条透明度0~1,默认0.5
  • count: 线条总数量,默认150
  • 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> </body> <ml> <link rel="stylesheet" type="texts" href="https://blog-static.cnblogs.com/files/monster-jian/flat-ui.min.css"/>

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.可点击可移动的二次元小人

8.1随着页面移动,效果如下:

博客园背景页面动态特效

8.2css代码

/*右侧滑动小人*/ .spig {display:block;width:175px;height:246px;position:absolute;bottom: 300px;left:180px;z-index:9999;} #message{color :#191919;border: 1px solid #c4c4c4;background:#ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;min-height:1em;padding:5px;top:-45px;position:absolute;text-align:center;width:auto !important;z-index:10000;-moz-box-shadow:0 0 15px #eeeeee;-webkit-box-shadow:0 0 15px #eeeeee;border-color:#eeeeee;box-shadow:0 0 15px #eeeeee;outline:none;font-size:0.16rem} .mumu{width:1.75rem;height:2.46rem;cursor: move;background:url(https://blog-static.cnblogs.com/files/ggymx/gril.gif) no-repeat;background-size:100% 100%}

8.3HTML代码

<!--博客精灵 start*--> <div id="spig" class="spig">     <div id="message">……</div>     <div id="mumu" class="mumu"></div> </div>

8.4js代码

博客园背景页面动态特效博客园背景页面动态特效

var isindex=true; var title=""; var visitor="这位怪蜀黍"; //根据分辨率调整小人位置 var addHeight;   if(window.screen.height=='1080'){   addHeight=  700; }else{  addHeight=   400; }  //右键菜单 jQuery(document).ready(function ($) {     $("#spig").mousedown(function (e) {         if(e.which==3){         showMessage("秘密通道:<br />    <img src="http://pic.sc.chinaz.com/Files/pic/Listfaces/3646/02.gif" alt="博客园背景页面动态特效"/><br/><a href="https://www.cnblogs.com/ggymx" title="放杨的猩猩">放杨的猩猩</a>  ",10000); } }); $("#spig").bind("contextmenu", function(e) {     return false; }); });  //鼠标在消息上时 jQuery(document).ready(function ($) {     $("#message").hover(function () {        $("#message").fadeTo("100", 1);      }); });   //鼠标在上方时 jQuery(document).ready(function ($) {     //$(".mumu").jrumble({rangeX: 2,rangeY: 2,rangeRot: 1});     $(".mumu").mouseover(function () {        $(".mumu").fadeTo("300", 0.3);        msgs = ["我隐身了,你看不到我", "我会隐身哦!嘿嘿!", "别动手动脚的,把手拿开!", "把手拿开我才出来!"];        var i = Math.floor(Math.random() * msgs.length);         showMessage(msgs[i]);     });     $(".mumu").mouseout(function () {         $(".mumu").fadeTo("300", 1)     }); });   //开始 jQuery(document).ready(function ($) {     if (isindex) { //如果是主页         var now = (new Date()).getHours();         if (now > 0 && now <= 6) {             showMessage(visitor + ' 你是夜猫子呀?还不睡觉,明天起的来么你?', 6000);         } else if (now > 6 && now <= 11) {             showMessage(visitor + ' 早上好,早起的鸟儿有虫吃噢!早起的虫儿被鸟吃,你是鸟儿还是虫儿?嘻嘻!', 6000);         } else if (now > 11 && now <= 14) {             showMessage(visitor + ' 中午了,吃饭了么?不要饿着了,饿死了谁来挺我呀!', 6000);         } else if (now > 14 && now <= 18) {             showMessage(visitor + ' 中午的时光真难熬!还好有你在!', 6000);         } else {             showMessage(visitor + ' 快来逗我玩吧!', 6000);         }     }     else {         showMessage('欢迎' + visitor + '来到《' + title + '》', 6000);     }    console.log('屏幕分辨率---------',window.screen.height)     $(".spig").animate({         top:$(".spig").offset().top+addHeight,         left: document.body.offsetWidth - 185     },     {         queue: false,         duration: 1000     }); });  //鼠标在某些元素上方时 jQuery(document).ready(function ($) {     $('h2 a').click(function () {//标题被点击时         showMessage('萌萌地加载《<span style="color:#0099cc;">' + $(this).text() + '</span>》中,请稍候');     });     $('h2 a').mouseover(function () {         showMessage('要看看《<span style="color:#0099cc;">' + $(this).text() + '</span>》这篇随笔么?');     });     $('#prev-page').mouseover(function(){         showMessage('要翻到上一页吗?');     });     $('#next-page').mouseover(function(){         showMessage('要翻到下一页吗?');     });     $('#index-links li a').mouseover(function () {         showMessage('去 <span style="color:#0099cc;">' + $(this).text() + '</span> 逛逛');     });     $('.tbCommentBodys').mouseover(function () {         showMessage('<span style="color:#0099cc;">' + visitor + '</span> 向评论栏出发吧!');     });     $('#submit').mouseover(function () {         showMessage('确认提交了么?');     });     $('#s').focus(function () {         showMessage('输入你想搜索的关键词再按Enter(回车)键就可以搜索啦!');     });     $('#go-prev').mouseover(function () {         showMessage('点它可以后退哦!');     });     $('#go-next').mouseover(function () {         showMessage('点它可以前进哦!');     });     $('#refresh').mouseover(function () {         showMessage('点它可以重新载入此页哦!');     });     $('#go-home').mouseover(function () {         showMessage('点它就可以回到首页啦!');     });     $('#addfav').mouseover(function () {         showMessage('点它可以把此页加入书签哦!');     });     $('#nav-two a').mouseover(function () {         showMessage('嘘,从这里可以进入控制面板的哦!');     });     $('.post-category a').mouseover(function () {         showMessage('点击查看此分类下得所有文章');     });     $('.post-heat a').mouseover(function () {         showMessage('点它可以直接跳到评论列表处.');     });     $('#tho-shareto span a').mouseover(function () {         showMessage('你知道吗?点它可以分享本文到'+$(this).attr('title'));     });     $('#switch-to-wap').mouseover(function(){         showMessage('点击可以切换到手机版博客版面');     }); });   //无聊讲点什么 jQuery(document).ready(function ($) {      window.setInterval(function () {         msgs = [ "陪我聊天吧!", "好无聊哦,你都不陪我玩!", "…@……!………", "^%#&*!@*(&#)(!)(", "我可爱吧!嘻嘻!~^_^!~~","谁淫荡呀?~谁淫荡?,你淫荡呀!~~你淫荡!~~","从前有座山,山上有座庙,庙里有个老和尚给小和尚讲故事,讲:“从前有座……”"];         var i = Math.floor(Math.random() * msgs.length);         showMessage(msgs[i], 8000);     }, 15000); }); //评论资料 jQuery(document).ready(function ($) {     $("#author").click(function () {         showMessage("留下你的尊姓大名!");         $(".spig").animate({             top: $("#author").offset().top - 70,             left: $("#author").offset().left - 170         },         {             queue: false,             duration: 1000         });     });     $("#email").click(function () {         showMessage("留下你的邮箱,不然就是无头像人士了!");         $(".spig").animate({             top: $("#email").offset().top - 70,             left: $("#email").offset().left - 170         },         {             queue: false,             duration: 1000         });     });     $("#url").click(function () {          showMessage("快快告诉我你的家在哪里,好让我去参观参观!");         $(".spig").animate({             top: $("#url").offset().top - 70,             left: $("#url").offset().left - 170         },         {             queue: false,             duration: 1000         });     });     $("#tbCommentBody").click(function () {         showMessage("认真填写哦!不然会被认作垃圾评论的!我的乖乖~");         $(".spig").animate({             top: $("#tbCommentBody").offset().top - 70,             left: $("#tbCommentBody").offset().left - 170         },         {             queue: false,             duration: 1000         });     }); });  var spig_top = 50; //滚动条移动 jQuery(document).ready(function ($) {     var f = $(".spig").offset().top;     $(window).scroll(function () {         $(".spig").animate({             top: $(window).scrollTop() + f +addHeight         },         {             queue: false,             duration: 1000         });     }); });  //鼠标点击时 jQuery(document).ready(function ($) {     var stat_click = 0;     $(".mumu").click(function () {                      stat_click++;             if (stat_click > 4) {                 msgs = ["你有完没完呀?", "你已经摸我" + stat_click + "次了", "非礼呀!救命!OH,My ladygaga"];                 var i = Math.floor(Math.random() * msgs.length);                 //showMessage(msgs[i]);             } else {                 msgs = ["筋斗云!~我飞!", "我跑呀跑呀跑!~~", "别摸我,大男人,有什么好摸的!", "惹不起你,我还躲不起你么?", "不要摸我了,我会告诉老婆来打你的!", "干嘛动我呀!小心我咬你!"];                 var i = Math.floor(Math.random() * msgs.length);                 //showMessage(msgs[i]);             }         s = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6,0.7,0.75,-0.1, -0.2, -0.3, -0.4, -0.5, -0.6,-0.7,-0.75];         var i1 = Math.floor(Math.random() * s.length);         var i2 = Math.floor(Math.random() * s.length);             $(".spig").animate({             left: document.body.offsetWidth/2*(1+s[i1]),             top:  document.body.offsetheight/2*(1+s[i1])             },             {                 duration: 500,                 complete: showMessage(msgs[i])             });              }); });   //显示消息函数  function showMessage(a, b) {     if (b == null) b = 10000;     jQuery("#message").hide().stop();     jQuery("#message").html(a);     jQuery("#message").fadeIn();     jQuery("#message").fadeTo("1", 1);     jQuery("#message").fadeOut(b); };  //拖动 var _move = false; var ismove = false; //移动标记 var _x, _y; //鼠标离控件左上角的相对位置 jQuery(document).ready(function ($) {     $("#spig").mousedown(function (e) {         _move = true;         _x = e.pageX - parseInt($("#spig").css("left"));         _y = e.pageY - parseInt($("#spig").css("top"));      });     $(document).mousemove(function (e) {         if (_move) {             var x = e.pageX - _x;              var y = e.pageY - _y;             var wx = $(window).width() - $('#spig').width();             var dy = $(document).height() - $('#spig').height();             if(x >= 0 && x <= wx && y > 0 && y <= dy) {                 $("#spig").css({                     top: y,                     left: x                 }); //控件新位置             ismove = true;             }         }     }).mouseup(function () {         _move = false;     }); });

js代码

9.背景图片定时更新

9.1css代码

body {     background-repeat: no-repeat;       background: rgba(12, 100, 129, 0) url('https://images.cnblogs.com/cnblogs_com/ggymx/1624408/o_191231104242bg2.jpg') fixed;     background-position: 100%  50%;      background-size: 100% 100%; }

9.2js代码

(function(){     var i=0;     //需要更新的背景图     var bgArr=['https://images.cnblogs.com/cnblogs_com/ggymx/1624408/o_191231104242bg2.jpg',                        'https://images.cnblogs.com/cnblogs_com/ggymx/1624408/o_191231103334bg1.jpg',                        'https://images.cnblogs.com/cnblogs_com/ggymx/1624408/o_191231111316bg3.jpg']     setInterval(function(){        $("body").css({"background-image":`url(${bgArr[i]})`});         //document.getElementsByTagName('body')[0].style.backgroundImage=`url(${bgArr[i]})`;         if(i==bgArr.length-1){             i=0;         }else{             i++;         }     },3000); })();

ps:可以在博客园的相册中上传自己喜欢的背景图,然后复制链接添加到里面即可

 

10.完成样式展示

博客园背景页面动态特效

 

11.以上几种样式中的URL,src 有带js文件,都是自己的文件路径,都可复制链接另寻为自己的js文件或其他格式文件,上传到自己的文件中,如图所示:

博客园背景页面动态特效

 

 

个人博客地址:https://www.cnblogs.com/liyhbk/