部落格園介面背景及一些特效設定
阿新 • • 發佈:2020-08-02
作者:struct_mooc 部落格地址:https://www.cnblogs.com/structmooc/p/13418577.html
目錄
直接來,把程式碼貼到對應欄目即可(注意要開通JS許可權,否則無法顯示,向部落格園申請許可權即可)。
1.部落格側邊欄公告(支援HTML程式碼) (支援 JS 程式碼)
//1.滑鼠點擊出愛心 //2.滑鼠點擊出特效 <!-- 愛心特效 --> <script type="text/javascript"> (function(window,document,undefined){ var hearts = []; window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback){ setTimeout(callback,1000/60); } })(); init(); function init(){ css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); attachEvent(); gameloop(); } function gameloop(){ for(var i=0;i<hearts.length;i++){ if(hearts[i].alpha <=0){ document.body.removeChild(hearts[i].el); hearts.splice(i,1); continue; } hearts[i].y--; hearts[i].scale += 0.004; hearts[i].alpha -= 0.013; hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color; } requestAnimationFrame(gameloop); } function attachEvent(){ var old = typeof window.onclick==="function" && window.onclick; window.onclick = function(event){ old && old(); createHeart(event); } } function createHeart(event){ var d = document.createElement("div"); d.className = "heart"; hearts.push({ el : d, x : event.clientX - 5, y : event.clientY - 5, scale : 1, alpha : 1, color : randomColor() }); document.body.appendChild(d); } function css(css){ var style = document.createElement("style"); style.type="text/css"; try{ style.appendChild(document.createTextNode(css)); }catch(ex){ style.styleSheet.cssText = css; } document.getElementsByTagName('head')[0].appendChild(style); } function randomColor(){ return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")"; } })(window,document); </script> <!-- 愛心特效 --> <!-- 滑鼠點選特效 --> <body> <a name="top"></a> <div id="page_begin_html"> <script src="https://blog-static.cnblogs.com/files/lq0001/silence.min.js"></script> <!-- <script type="text/javascript">initModel()</script> --> <!-- 滑鼠點選特效 --> <script src="https://files.cnblogs.com/files/graytido/cursor-effects.js"></script> <!-- 滑鼠點選特效end --> <style> /** 滑鼠樣式 **/ body { cursor: url(https://www.tiezi.xyz/usr/uploads/2017/08/149116970.png), auto; } a,a:visited { cursor:url(https://www.tiezi.xyz/usr/uploads/2017/08/1738446070.png),auto; } </style> </div> <!-- 滑鼠點選特效 -->
2.頁首HTML程式碼
//1.雪花 //2.線條 //3.社會主義核心價值觀(可自定義,裡面的文字換成其他就會顯示你輸入的文字了) <!--雪花--> <script> (function($){ $.fn.snow=function(options){ var $flake=$('<div />') .css({ 'position':'fixed',//'absolute', 'top':'-50px', 'z-index':'1000' }) .html('❄'); var documentHeight=document.documentElement.clientHeight;//$(document).height(); var documentWidth=$(document).width(); var defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"}; var options=$.extend({},defaults,options); var interval=setInterval(function(){ var startPositionLeft=Math.random()*documentWidth-100; var startOpacity=0.5+Math.random(); var sizeFlake=options.minSize+Math.random()*options.maxSize; var endPositionTop=documentHeight-40; var endPositionLeft=startPositionLeft-100+Math.random()*200; var durationFall=documentHeight*10+Math.random()*5000; $flake.clone() .appendTo('body') .css({ left:startPositionLeft, opacity:startOpacity, 'font-size':sizeFlake, color:options.flakeColor }) .animate({ top:endPositionTop, left:endPositionLeft, opacity:0.2 }, durationFall, 'linear', function(){ $(this).remove(); }); },options.newOn); }; })(jQuery); $.fn.snow({ minSize: 10, maxSize: 50, newOn: 1000, flakeColor: '#ccc'}); </script> <!--雪花--> <!--線條隨滑鼠流動--> <script> !function(){ function n(n,e,t){ return n.getAttribute(e)||t } function e(n){ return document.getElementsByTagName(n) } function t(){ var t=e("script"),o=t.length,i=t[o-1]; return{ l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99) } } function o(){ a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth, c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight } function i(){ r.clearRect(0,0,a,c); var n,e,t,o,m,l; s.forEach(function(i,x){ for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e], null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y, l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m), t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke())) }), x(i) } var a,c,u,m=document.createElement("canvas"), d=t(),l="c_n"+d.l,r=m.getContext("2d"), x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame|| function(n){ window.setTimeout(n,1e3/45) }, w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o, window.onmousemove=function(n){ n=n||window.event,y.x=n.clientX,y.y=n.clientY }, window.onmouseout=function(){ y.x=null,y.y=null }; for(var s=[],f=0;d.n>f;f++){ var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3}) } u=s.concat([y]), setTimeout(function(){i()},100) }(); </script> <!--線條隨滑鼠流動--> <!--滑鼠點選彈出社會主義核心價值觀--> <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, "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> <!--滑鼠點選彈出社會主義核心價值觀-->
3.頁尾HTML程式碼
//1.雪花 //2.小魚 //3.看板娘 <!-- 雪花 --> <div class="Snow"> <canvas id="Snow"></canvas> </div> <script src="https://files.cnblogs.com/files/structmooc/%E9%9B%AA%E8%8A%B1.js"></script> <!-- 雪花 --> <!-- 底部加了小魚<・)))><<~ --> <div id="jsi-flying-fish-container" class="container"></div> <script src='https://files.cnblogs.com/files/structmooc/%E5%BA%95%E9%83%A8%E5%8A%A0%E4%BA%86%E5%B0%8F%E9%B1%BC.css' defer></script> <style> @media only screen and (max-width: 767px) { #sidebar_search_box input[type=text]{width:calc(100% - 24px) } } </style> <!-- 底部加了小魚<・)))><<~ --> <!-- 看板娘 --> <!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/structmooc/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/structmooc/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/structmooc/live2d.js"></script> <script src="https://files.cnblogs.com/files/structmooc/waifu-tis.js"></script> <script type="text/javascript">initModel()</script> </body> </html> <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/structmooc/flat-ui.min.css"/> <!-- 看板娘 -->