博客園裝飾樣式 博客園美化樣式
博客園美化樣式一條龍服務
博客園作為自己總結知識、見證自己技術成長的技術家園，就像自己的房間一樣，想收拾的干凈，舒服，與眾不同
因為網上內容比較零散雜亂，裝飾博客的時候也花了挺多時間去搜索，測試，針對自己博客布局進行了css樣式的調整和js微調
本來只是想自己使用，有網友需要，就開放出來，來源于網絡回歸于網絡，代碼已經增加注釋并且明確代碼安放位置，希望可以幫到大家，節省各位的時間
以下代碼均親測有效且大多正在使用，效果參考我的博客
所有前端源碼均來自網絡，作者不詳，感謝網絡各位前端大神的奉獻
1.頁面點擊小愛心
愛心形狀顏色，文字內容可以根據自己需求修改
<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>
2.右下角回到頂部火箭發射
圖片路徑可以訪問我的圖片地址，下載后上傳到自己博客園后臺，修改為自己的路經，不然我更改后你的就沒了
（本地圖片——>博客園管理——>文件——>上傳文件到后臺——>保存——>得到鏈接地址——>更換地址）
/* 置頂小火箭樣式 start_________________________________ */ body{height:3000px;} #rocket-to-top div { left: 0; margin: 0; overflow: hidden; padding: 0; position: absolute; top: 0; width: 149px; } #rocket-to-top .level-2 { background: url("https://files-cdn.cnblogs.com/files/xp1315458571/o_o_rocket_button_up.bmp") no-repeat scroll -149px 0 transparent; display: none; height: 250px; opacity: 0; z-index: 1; } #rocket-to-top .level-3 { background: none repeat scroll 0 0 transparent; cursor: pointer; display: block; height: 150px; z-index: 2; } #rocket-to-top { background: url("https://files-cdn.cnblogs.com/files/xp1315458571/o_o_rocket_button_up.bmp") no-repeat scroll 0 0 transparent; cursor: default; display: block; height: 250px; margin: -125px 0 0; overflow: hidden; padding: 0; position: fixed; right: 0; top: 80%; width: 149px; z-index: 11; } /* 置頂小火箭樣式 end____________________________________________________________________ */
3.右側懸浮目錄
js代碼側邊欄
一個js文件只有一個
<script type="text/javascript"> </script>標簽 ， 所有的樣式的js代碼都放進這個標簽里面來，不要直接粘貼到側邊欄里面一了百了
目錄的文字，大小什么的自己在css里面修改
<script type="text/javascript"> var BlogDirectory = { /* 獲取元素位置，距瀏覽器左邊界的距離（left）和距瀏覽器上邊界的距離（top） */ getElementPosition:function (ele) { var topPosition = 0; var leftPosition = 0; while (ele){ topPosition += ele.offsetTop; leftPosition += ele.offsetLeft; ele = ele.offsetParent; } return {top:topPosition, left:leftPosition}; }, /* 獲取滾動條當前位置 */ getScrollBarPosition:function () { var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop; return scrollBarPosition; }, /* 移動滾動條，finalPos 為目的位置，internal 為移動速度 */ moveScrollBar:function(finalpos, interval) { //若不支持此方法，則退出 if(!window.scrollTo) { return false; } //窗體滾動時，禁用鼠標滾輪 window.onmousewheel = function(){ return false; }; //清除計時 if (document.body.movement) { clearTimeout(document.body.movement); } var currentpos =BlogDirectory.getScrollBarPosition();//獲取滾動條當前位置 var dist = 0; if (currentpos == finalpos) {//到達預定位置，則解禁鼠標滾輪，并退出 window.onmousewheel = function(){ return true; } return true; } if (currentpos < finalpos) {//未到達，則計算下一步所要移動的距離 dist = Math.ceil((finalpos - currentpos)/10); currentpos += dist; } if (currentpos > finalpos) { dist = Math.ceil((currentpos - finalpos)/10); currentpos -= dist; } var scrTop = BlogDirectory.getScrollBarPosition();//獲取滾動條當前位置 window.scrollTo(0, currentpos);//移動窗口 if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，則解禁鼠標滾輪，并退出 { window.onmousewheel = function(){ return true; } return true; } //進行下一步移動 var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; document.body.movement = setTimeout(repeat, interval); }, htmlDecode:function (text){ var temp = document.createElement("div"); temp.innerHTML = text; var output = temp.innerText || temp.textContent; temp = null; return output; }, /* 創建博客目錄， id表示包含博文正文的 div 容器的 id， mt 和 st 分別表示主標題和次級標題的標簽名稱（如 H2、H3，大寫或小寫都可以！）， interval 表示移動的速度 */ createBlogDirectory:function (id, mt, st, interval){ //獲取博文正文div容器 var elem = document.getElementById(id); if(!elem) return false; //獲取div中所有元素結點 var nodes = elem.getElementsByTagName("*"); //創建博客目錄的div容器 var divSideBar = document.createElement('DIV'); divSideBar.className = 'uprightsideBar'; divSideBar.setAttribute('id', 'uprightsideBar'); var divSideBarTab = document.createElement('DIV'); divSideBarTab.setAttribute('id', 'sideBarTab'); divSideBar.appendChild(divSideBarTab); var h2 = document.createElement('H2'); divSideBarTab.appendChild(h2); var txt = document.createTextNode('目錄導航'); h2.appendChild(txt); var divSideBarContents = document.createElement('DIV'); divSideBarContents.style.display = 'none'; divSideBarContents.setAttribute('id', 'sideBarContents'); divSideBar.appendChild(divSideBarContents); //創建自定義列表 var dlist = document.createElement("dl"); divSideBarContents.appendChild(dlist); var num = 0;//統計找到的mt和st mt = mt.toUpperCase();//轉化成大寫 st = st.toUpperCase();//轉化成大寫 //遍歷所有元素結點 for(var i=0; i<nodes.length; i++) { if(nodes[i].nodeName == mt|| nodes[i].nodeName == st) { //獲取標題文本 var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的內容可能有HTML標簽，所以用正則表達式去除HTML的標簽 nodetext = nodetext.replace(/ /ig, "");//替換掉所有的 nodetext = BlogDirectory.htmlDecode(nodetext); //插入錨 nodes[i].setAttribute("id", "blogTitle" + num); var item; switch(nodes[i].nodeName) { case mt: //若為主標題 item = document.createElement("dt"); break; case st: //若為子標題 item = document.createElement("dd"); break; } //創建錨鏈接 var itemtext = document.createTextNode(nodetext); item.appendChild(itemtext); item.setAttribute("name", num); item.onclick = function(){ //添加鼠標點擊觸發函數 var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name"))); if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false; }; //將自定義表項加入自定義列表中 dlist.appendChild(item); num++; } } if(num == 0) return false; /*鼠標進入時的事件處理*/ divSideBarTab.onmouseenter = function(){ divSideBarContents.style.display = 'block'; } /*鼠標離開時的事件處理*/ divSideBar.onmouseleave = function() { divSideBarContents.style.display = 'none'; } document.body.appendChild(divSideBar); } }; window.onload=function(){ /*頁面加載完成之后生成博客目錄*/ BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20); } </script>
/*生成博客目錄的CSS*/ #uprightsideBar{ font-size:12px; font-family:Arial, Helvetica, sans-serif; text-align:left; position:fixed;/*將div的位置固定到距離top:50px，right:0px的位置，這樣div就會處在最右邊的位置，距離頂部50px*/ top:50px; right:0px; width: auto; height: auto; } #sideBarTab{ float:left; width:30px; border:1px solid #e5e5e5; border-right:none; text-align:center; background:#ffffff; } #sideBarContents{ float:left; overflow:auto; overflow-x:hidden;!important; width:200px; min-height:108px; max-height:460px; border:1px solid #e5e5e5; border-right:none; background:#ffffff; } #sideBarContents dl{ margin:0; padding:0; } #sideBarContents dt{ margin-top:5px; margin-left:5px; } #sideBarContents dd, dt { cursor: pointer; } #sideBarContents dd:hover, dt:hover { color:#A7995A; }
4.頂部目錄
放入頁腳
<!-- 目錄索引列表生成———————————————————————————————— --> <script language="javascript" type="text/javascript"> function GenerateContentList() { if ($('#cnblogs_post_body').length == 0) { return; } var jquery_h1_list = $('#cnblogs_post_body h1'); var jquery_h2_list = $('#cnblogs_post_body h2'); var jquery_h3_list = $('#cnblogs_post_body h3'); if (jquery_h1_list.length != 0) { var content = '<a name="_labelTop"></a>'; content += '<div id="navCategory">'; content += '<p style="font-size:18px"><b>目錄</b></p>'; content += '<ul class="first_class_ul">'; for (var i = 0; i < jquery_h1_list.length; i++) { var go_to_top = '<div style="text-align: right"><a href="#_labelTop">返回目錄</a><a name="_label' + i + '"></a></div>'; $(jquery_h1_list[i]).before(go_to_top); var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h1_list[i]).text() + '</a></li>'; var nextH1Index = i + 1; if (nextH1Index == jquery_h1_list.length) { nextH1Index = 0; } var jquery_h2_list = $(jquery_h1_list[i]).nextUntil(jquery_h1_list[nextH1Index], "h2"); if (jquery_h2_list.length > 0) { li_content += '<ul class="second_class_ul">'; } for (var j = 0; j < jquery_h2_list.length; j++) { var go_to_top2 = '<div style="text-align: right"><a href="#_labelTop">返回目錄</a><a name="_lab2_'+ i + '_' + j + '"></a></div>'; $(jquery_h2_list[j]).before(go_to_top2); li_content +='<li><a href="#_lab2_'+ i +'_' + j + '">' + $(jquery_h2_list[j]).text() + '</a></li>'; var nextH2Index = j + 1; var next; if (nextH2Index == jquery_h2_list.length) { if (i + 1 == jquery_h1_list.length) { next = jquery_h1_list[0]; } else { next = jquery_h1_list[i + 1]; } } else { next = jquery_h2_list[nextH2Index]; } var jquery_h3_list = $(jquery_h2_list[j]).nextUntil(next, "h3"); if (jquery_h3_list.length > 0) { li_content += '<ul class="third_class_ul">'; } for (var k = 0; k < jquery_h3_list.length; k++) { var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop">返回目錄</a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>'; $(jquery_h3_list[k]).before(go_to_third_Content); li_content += '<li><a href="#_label3_' + i + '_' + j + '_' + k + '">' + $(jquery_h3_list[k]).text() + '</a></li>'; } if (jquery_h3_list.length > 0) { li_content += '</ul>'; } li_content += '</li>'; } if (jquery_h2_list.length > 0) { li_content +='</ul>'; } li_content +='</li>'; content += li_content; } content += '</ul>'; content += '</div>'; } else if (jquery_h2_list.length != 0) { var content = '<a name="_labelTop"></a>'; content += '<div id="navCategory">'; content += '<p style="font-size:18px"><b>目錄</b></p>'; content += '<ul class="second_class_ul">'; for(var i =0; i < jquery_h2_list.length; i++) { var go_to_top2 = '<div style="text-align: right"><a href="#_labelTop">返回目錄</a><a name="_lab2_'+ i + '_' + j + '"></a></div>'; $(jquery_h2_list[j]).before(go_to_top2); var li_content = '<li><a href="#_lab' + i + '">' + $(jquery_h2_list[i]).text() + '</a></li>'; var nextH1Index = i + 1; if (nextH1Index == jquery_h2_list.length) { nextH1Index = 0; } var jquery_h3_list = $(jquery_h2_list[i]).nextUntil(jquery_h2_list[i+1], "h3"); if(jquery_h3_list.length>0) { li_content +='<ul class="third_class_ul">'; } for(var j = 0;j < jquery_h3_list.length;j++) { var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop">返回目錄</a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>'; $(jquery_h3_list[k]).before(go_to_third_Content); li_content +='<li><a href="#_lab2'+ i +'_' + j + '">' + $(jquery_h3_list[j]).text() + '</a></li>'; } if(jquery_h3_list.length>0) { li_content +='</ul>'; } li_content +='</li>'; content += li_content; } content += '</ul>'; content += '</div>'; } else if (jquery_h3_list.length != 0) { var content = '<a name="_labelTop"></a>'; content += '<div id="navCategory">'; content += '<p style="font-size:18px"><b>目錄</b></p>'; content += '<ul>'; for(var i = 0; i < jquery_h3_list.length; i++) { var go_to_third_Content = '<div style="text-align: right"><a href="#_labelTop">返回目錄</a><a name="_label3_' + i + '_' + j + '_' + k + '"></a></div>'; $(jquery_h3_list[k]).before(go_to_third_Content); var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>'; content += li_content; } content += '</ul>'; content += '</div>'; } else { return; } $($('#cnblogs_post_body')[0]).prepend(content); } GenerateContentList(); </script> <!--頂部目錄結束________________________________________________________-->
5.博客整體模板
該模板基于博客園的En_summerGarden模板修改而來，以下代碼是我在網上找到的未修改代碼，我的博客用的就是這個，只是我針對文字、透明度、控件、背景圖等做了樣式修改
如果不知道代碼里面修改哪里的話，就用鼠標右鍵查看前端代碼，左上角捕捉小箭頭獲取頁面元素，然后在頁面上動態更改css，達到滿意后復制當前樣式替換模板樣式就好了
背景圖片路徑可以修改為自己的路經（本地圖片——>博客園管理——>文件——>上傳文件到后臺——>保存——>得到鏈接地址——>更換地址）
/*================================================================================>修改頁面代碼字體<===========*/ .cnblogs_code pre { font-family: Courier New!important; font-size: 16px!important; word-wrap: break-word; white-space: pre-wrap; } .cnblogs_code span { font-family: Courier New!important; font-size: 16px!important; line-height: 1.5!important; } /*================================================================================>修改背景樣式<===========*/ #google_ad_c1, #google_ad_c2 {display:none;} .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea { font-size: 14px!important; } #home { opacity: 0.80; margin: 0 auto; width: 85%; min-width: 950px; background-color: #fff; padding: 30px; margin-top: 30px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); } #blogTitle h1 { font-size: 30px; font-weight: bold; font-family: "Comic Sans MS"; line-height: 1.5em; margin-top: 20px; color: #515151; } #navList a:hover { color: #4C9ED9; text-decoration: none; } #navList a { display: block; width: 5em; height: 22px; float: left; text-align: center; padding-top: 18px; } #navigator { font-size: 15px; border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; height: 50px; clear: both; margin-top: 25px; } .catListTitle { margin-top: 21px; margin-bottom: 10.5px; text-align: left; border-left: 10px solid rgba(82, 168, 236, 0.8); padding: 10px 0 14px 10px; background-color: #f5f5f5; } #ad_under_post_holder #google_ad_c1,#google_ad_c2{ display: none !important; } body { color: #000;/*====================================================>背景圖url==============================*/ background: url(https://files.cnblogs.com/files/Hotaru-Xin/bg3.gif ) fixed; background-size: 100%; background-repeat: no-repeat; font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; font-size: 12px; min-height: 101%; } #topics .postTitle { border: 0px; font-size: 200%; font-weight: bold; float: left; line-height: 1.5; width: 100%; padding-left: 5px; } div.commentform p{ margin-bottom:10px; } .comment_btn { padding: 5px 10px; height: 35px; width: 90px; border: 0 none; border-radius: 5px; background: #ddd; color: #999; cursor:pointer; font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋體, Arial, sans-serif; text-shadow: 0 0 1px #fff; display: inline !important; } .comment_btn:hover{ padding: 5px 10px; height: 35px; width: 90px; border: 0 none; border-radius: 5px; background: #258fb8; color: white; cursor:pointer; font-family: "Lato", Helvetica Neue, Helvetica, Microsoft Yahei, 宋體, Arial, sans-serif; text-shadow: 0 0 1px #fff; display: inline !important; } #commentform_title { background-image:none; background-repeat:no-repeat; margin-bottom:10px; padding:0; font-size:24px; } #commentbox_opt,#commentbox_opt + p { text-align:center; } .commentbox_title { width: 100%; } #tbCommentBody { font-family:'Microsoft Yahei', Microsoft Yahei, 宋體, sans-serif; margin-top:10px; max-width:100%; min-width:100%; background:white; color:#333; border:2px solid #fff; box-shadow:inset 0 0 8px #aaa; // padding:10px; height:250px; font-size:14px; min-height:120px; } .feedbackItem { font-size:14px; line-height:24px; margin:10px 0; padding:20px; background:#F2F2F2; box-shadow:0 0 5px #aaa; } .feedbackListSubtitle { font-weight:normal; } #blog-comments-placeholder, #comment_form { padding: 20px; background: #fff; -webkit-box-shadow: 1px 2px 3px #ddd; box-shadow: 1px 2px 3px #ddd; margin-bottom: 50px; } .feedback_area_title { margin-bottom: 15px; font-size: 1.8em; } .feedbackItem { border-bottom: 1px solid #CCC; margin-bottom: 10px; padding: 5px; background: rgb(248, 248, 248); } .color_shine {background: rgb(226, 242, 255);} .feedbackItem:hover {-webkit-animation-name: color_shine;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: infinite;} #comment_form .title { font-weight: normal; margin-bottom: 15px; } #header { background: url('') no-repeat right top; height:146px; padding-top:30px; } .dayTitle { width: 100%; color: #6466b3; font-weight: bold; line-height: 1.5em; font-size: 110%; margin-top: 30px; margin-bottom: 10px; clear:both; text-align:center; } #topics .postTitle { font-size: 130%; font-weight: bold; float: left; line-height: 1.5em; width: 100%; padding-left: 5px; margin-bottom:15px; margin-top: 20px; } .postTitle a:link, .postTitle a:visited, .postTitle a:active { color: #6499b3; }
6.雪花特效
下面提供兩種雪花，選擇一個自己喜歡的，直接放入頁腳就好了，雪花在頁面上的顯示范圍在css里面修改
<script type="text/javascript"> (function($){ $.fn.snow = function(options){ var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'), documentHeight = $(document).height(), documentWidth = $(document).width(), defaults = { minSize : 10, maxSize : 20, newOn : 1000, flakeColor : "#AFDAEF" /* 此處可以定義雪花顏色，若要白色可以改為#FFFFFF */ }, options = $.extend({}, defaults, options); var interval= setInterval( function(){ var startPositionLeft = Math.random() * documentWidth - 100, startOpacity = 0.5 + Math.random(), sizeFlake = options.minSize + Math.random() * options.maxSize, endPositionTop = documentHeight - 200, endPositionLeft = startPositionLeft - 500 + Math.random() * 500, 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); $(function(){ $.fn.snow({ minSize: 5, /* 定義雪花最小尺寸 */ maxSize: 50,/* 定義雪花最大尺寸 */ newOn: 300 /* 定義密集程度，數字越小越密集 */ }); }); </script>
<script type="text/javascript"> /* 控制下雪 */ function snowFall(snow) { /* 可配置屬性 */ snow = snow || {}; this.maxFlake = snow.maxFlake || 200; /* 最多片數 */ this.flakeSize = snow.flakeSize || 10; /* 雪花形狀 */ this.fallSpeed = snow.fallSpeed || 1; /* 墜落速度 */ } /* 兼容寫法 */ requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { setTimeout(callback, 1000 / 60); }; cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame; /* 開始下雪 */ snowFall.prototype.start = function(){ /* 創建畫布 */ snowCanvas.apply(this); /* 創建雪花形狀 */ createFlakes.apply(this); /* 畫雪 */ drawSnow.apply(this) } /* 創建畫布 */ function snowCanvas() { /* 添加Dom結點 */ var snowcanvas = document.createElement("canvas"); snowcanvas.id = "snowfall"; snowcanvas.width = window.innerWidth; snowcanvas.height = document.body.clientHeight; snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;"); document.getElementsByTagName("body")[0].appendChild(snowcanvas); this.canvas = snowcanvas; this.ctx = snowcanvas.getContext("2d"); /* 窗口大小改變的處理 */ window.onresize = function() { snowcanvas.width = window.innerWidth; /* snowcanvas.height = window.innerHeight */ } } /* 雪運動對象 */ function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) { this.x = Math.floor(Math.random() * canvasWidth); /* x坐標 */ this.y = Math.floor(Math.random() * canvasHeight); /* y坐標 */ this.size = Math.random() * flakeSize + 2; /* 形狀 */ this.maxSize = flakeSize; /* 最大形狀 */ this.speed = Math.random() * 1 + fallSpeed; /* 墜落速度 */ this.fallSpeed = fallSpeed; /* 墜落速度 */ this.velY = this.speed; /* Y方向速度 */ this.velX = 0; /* X方向速度 */ this.stepSize = Math.random() / 30; /* 步長 */ this.step = 0 /* 步數 */ } flakeMove.prototype.update = function() { var x = this.x, y = this.y; /* 左右擺動(余弦) */ this.velX *= 0.98; if (this.velY <= this.speed) { this.velY = this.speed } this.velX += Math.cos(this.step += .05) * this.stepSize; this.y += this.velY; this.x += this.velX; /* 飛出邊界的處理 */ if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) { this.reset(canvas.width, canvas.height) } }; /* 飛出邊界-放置最頂端繼續墜落 */ flakeMove.prototype.reset = function(width, height) { this.x = Math.floor(Math.random() * width); this.y = 0; this.size = Math.random() * this.maxSize + 2; this.speed = Math.random() * 1 + this.fallSpeed; this.velY = this.speed; this.velX = 0; }; // 渲染雪花-隨機形狀（此處可修改雪花顏色！！！） flakeMove.prototype.render = function(ctx) { var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size); snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此處是雪花顏色，默認是白色 */ snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改為其他顏色，請自行查 */ snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16進制的RGB 顏色代碼。 */ ctx.save(); ctx.fillStyle = snowFlake; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); ctx.restore(); }; /* 創建雪花-定義形狀 */ function createFlakes() { var maxFlake = this.maxFlake, flakes = this.flakes = [], canvas = this.canvas; for (var i = 0; i < maxFlake; i++) { flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed)) } } /* 畫雪 */ function drawSnow() { var maxFlake = this.maxFlake, flakes = this.flakes; ctx = this.ctx, canvas = this.canvas, that = this; /* 清空雪花 */ ctx.clearRect(0, 0, canvas.width, canvas.height); for (var e = 0; e < maxFlake; e++) { flakes[e].update(); flakes[e].render(ctx); } /* 一幀一幀的畫 */ this.loop = requestAnimationFrame(function() { drawSnow.apply(that); }); } /* 調用及控制方法 */ var snow = new snowFall({maxFlake:500}); snow.start(); </script>
7.炫酷愛心跟隨效果
將樣式放入css，js代碼放入側邊欄或者頁腳都行
效果確實可以出來，就是可能跟我的模板沖突，頁面會卡頓，占用鼠標，造成不能復制，很喜歡的效果，可惜了
/*鼠標跟隨效果*/ <style type="text/css"> .draw { position: fixed; width: 1px; line-height: 1px; pointer-events: none; } @keyframes floatOne { 0% { opacity:1; } 50% { opacity:1; } 100% { opacity:0; transform:translate3D(0, -20px, 0) scale(5) rotate(45deg); } } </style> <script type="text/javascript"> var H = 0; $(document).bind('mousemove touchmove',function(e) { e.preventDefault(); var drawSize = 10; var drawType = '?'; var floatType = 'floatOne'; var xPos = e.originalEvent.pageX; var yPos = e.originalEvent.pageY; $('body').append('<div class="draw" style=" font-size:'+drawSize+'px;left:'+xPos+'px;top:'+yPos+'px;-webkit-animation:'+floatType+' .9s 1;-moz-animation:'+floatType+' .9s 1;color:#FF83FA;">'+drawType+'</div>'); $('.draw').each(function() { var div = $(this); setTimeout(function() {$(div).remove();},800); }); }); </script>
8.鼠標點擊爆炸效果
我的爆炸效果只會在頁面未完全加載之前也就是頁面還在轉圈圈加載的時候會有效果，完全加載之后就沒有了，可能和我的其他代碼沖突了
/* 點擊爆炸效果*/ <canvas class="fireworks" style="position: fixed; left: 0px; top: 0px; z-index: 1; pointer-events: none; width: 1440px; height: 451px;" width="2880" height="902"></canvas> <script type="text/javascript" src="http://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> <script type="text/javascript"> "use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}; </script>
總結不易，如果確實幫助到了你，就右側打賞一分鼓勵一下吧
9.博客園旋轉魔方
魔方的位置和大小什么的需要你自己根據自己的需求調整，想放在哪里就調整位置，可以先生成效果，然后在網頁里面動態調整，然后復制當前樣式替換模板
/*魔方樣式============================================*/ .wrap { width: 159px; height: 200px; margin: 0px; position:absolute; z-index : 10; top: 1150px; left: 1px; } /*包裹所有容器樣式*/ /*設置transform-style: preserve-3d，讓其子元素在3D空間呈現*/ .cube { width: 50px; height: 50px; margin: 0 auto; transform-style: preserve-3d; transform: rotateX(-30deg) rotateY(-80deg); animation: rotate linear 20s infinite; } @-webkit-keyframes rotate { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } } .cube div { position: absolute; width: 200px; height: 200px; opacity: 0.8; transition: all .4s; } /*定義所有圖片樣式*/ .pic { width: 200px; height: 200px; } .cube .out_front { transform: rotateY(0deg) translateZ(100px); } .cube .out_back { transform: translateZ(-100px) rotateY(180deg); } .cube .out_left { transform: rotateY(-90deg) translateZ(100px); } .cube .out_right { transform: rotateY(90deg) translateZ(100px); } .cube .out_top { transform: rotateX(90deg) translateZ(100px); } .cube .out_bottom { transform: rotateX(-90deg) translateZ(100px); } /*定義小正方體樣式*/ .cube span { display: block; width: 100px; height: 100px; position: absolute; top: 50px; left: 50px; } .cube .in_pic { width: 100px; height: 100px; } .cube .in_front { transform: rotateY(0deg) translateZ(50px); } .cube .in_back { transform: translateZ(-50px) rotateY(180deg); } .cube .in_left { transform: rotateY(-90deg) translateZ(50px); } .cube .in_right { transform: rotateY(90deg) translateZ(50px); } .cube .in_top { transform: rotateX(90deg) translateZ(50px); } .cube .in_bottom { transform: rotateX(-90deg) translateZ(50px); } /*鼠標移入后樣式*/ .cube:hover .out_front { transform: rotateY(0deg) translateZ(200px); } .cube:hover .out_back { transform: translateZ(-200px) rotateY(180deg); } .cube:hover .out_left { transform: rotateY(-90deg) translateZ(200px); } .cube:hover .out_right { transform: rotateY(90deg) translateZ(200px); } .cube:hover .out_top { transform: rotateX(90deg) translateZ(200px); } .cube:hover .out_bottom { transform: rotateX(-90deg) translateZ(200px); } /*魔方樣式結束============================================*/
body標簽內是有效內容，放入body標簽內即可，12張圖片鏈接需要你自己更換為你自己的圖片地址，我只保留了一張圖片的鏈接給你看效果
圖片路徑可以修改為自己的路經（本地圖片——>博客園管理——>文件——>上傳文件到后臺——>保存——>得到鏈接地址——>更換地址）
<body>
<!-- ++++++++++++++++++++旋轉魔方++++++++++++++++++++++++++++-->
<!-- 旋轉魔方外層最大容器 -->
<div class="wrap">
<!--包裹所有元素的容器-->
<div class="cube">
<!--前面圖片 -->
<div class="out_front">
<img src="你的鏈接" class="pic" />
</div>
<!--后面圖片 -->
<div class="out_back">
<img src="你的鏈接" class="pic" />
</div>
<!--左面圖片 -->
<div class="out_left">
<img src="你的鏈接" class="pic" />
</div>
<!--右面圖片 -->
<div class="out_right">
<img src="你的鏈接" class="pic" />
</div>
<!--上面圖片 -->
<div class="out_top">
<img src="https://files-cdn.cnblogs.com/files/xp1315458571/mofang5.bmp" class="pic" />
</div>
<!--下面圖片 -->
<div class="out_bottom">
<img src="你的鏈接" class="pic" />
</div>
<!--小正方體 -->
<span class="in_front">
<img src="你的鏈接" class="in_pic" />
</span>
<span class="in_back">
<img src="你的鏈接" class="in_pic" />
</span>
<span class="in_left">
<img src="你的鏈接" class="in_pic" />
</span>
<span class="in_right">
<img src="你的鏈接" class="in_pic" />
</span>
<span class="in_top">
<img src="你的鏈接" class="in_pic" />
</span>
<span class="in_bottom">
<img src="你的鏈接" class="in_pic" />
</span>
</div>
</div>
<!-- ++++++++++++++++++++旋轉魔方++++++++++++++++++++++++++++-->
</body>
浙公網安備 33010602011771號