我的博客地址:[https://ayjcsgm.github.io/]
【01】添加卡通人物(看板娘)
我在逛別人博客的時候偶然發現右下角居然有一個萌萌的卡通人物,還能根據你鼠標位置搖頭,瞬間被吸引到了,趕緊也給自己博客添加一個吧!點擊此處進入該項目地址
輸入如下命令獲取 live2d :
$ npm install --save hexo-helper-live2d
輸入以下命令,下載相應的模型,將 packagename 更換成模型名稱即可,更多模型選擇請點擊此處,各個模型的預覽請訪問原作者的博客
$ npm install packagename
打開站點目錄下的 _config.yml 文件,添加如下代碼:
live2d:
enable: true
scriptFrom: local
model:
use: live2d-widget-model-haruto #模型選擇
display:
position: right #模型位置
width: 150 #模型寬度
height: 300 #模型高度
mobile:
show: false #是否在手機端顯示
設置好過後我們就擁有了一個卡通人物
【02】添加鼠標點擊愛心效果
在 \themes\hexo-theme-spfk\source\js 下新建文件 love.js,在 love.js 文件中添加以下代碼:
!function(e,t,a){function n(){c(".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: 500%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
在 \themes\hexo-theme-spfk\layout\layout.ejs 文件末尾添加以下代碼:
<!-- 頁面點擊小紅心 -->
<script type="text/javascript" src="/js/love.js"></script>
完成以上操作後,當我們點擊鼠標的時候就可以看見愛心的特效了
【03】添加鼠標點擊顯示字體效果
在 /themes/hexo-theme-spfk/source/js 下新建文件 click_show_text.js,在 click_show_text.js 文件中添加以下代碼:
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array
("富強", "民主", "文明", "和諧", "自由", "平等", "公正", "法治", "愛國", "敬業", "誠信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 5,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#FF0000"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
3000,
function() {
$i.remove();
});
});
setTimeout('delay()', 2000);
});
function delay() {
$(".buryit").removeAttr(“onclick”);
}
其中的社會主義核心價值觀可以根據你自己的創意替換爲其他文字,然後在 \themes\hexo-theme-spfk\layout\layout.ejs 文件末尾添加以下代碼:
<!--單擊顯示文字-->
<script type="text/javascript" src="/js/click_show_text.js"></script>
最終實現效果如下:
【04】添加鼠標點擊煙花爆炸效果
在 \themes\material-x\source\js 目錄下新建一個 fireworks.js 的文件,裏面寫入以下代碼:
"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)};
然後在 \themes\material-x\layout\layout.ejs 文件中寫入以下代碼:
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/fireworks.js"></script>
最終效果:
【05】自定義鼠標指針樣式
在 \themes\material-x\source\less\_base.less 文件 body 樣式裏寫入如下代碼:
body {
cursor: url(https://cdn.jsdelivr.net/gh/TRHX/[email protected]/images/mouse.cur),auto;
background-color: @theme_background;
......
......
}
鼠標指針可以用 Axialis CursorWorkshop 這個軟件自己製作,不同主題具體放的文件有所不同,確保在博客主體 body 的 CSS 文件中即可,其中的鼠標指針鏈接可替換成自己的,首先嚐試加載https://cdn.jsdelivr.net/gh/TRHX/[email protected]/images/mouse.cur
,如果該文件不存在或由於其他原因無效,那麼 auto 會被使用,也就是自動默認效果,圖片格式爲.ico、.ani、.cur,建議使用.cur,如果使用.ani或者其他格式無效,原因是瀏覽器兼容問題,請閱讀參考文檔或者參考以下兼容表:
瀏覽器 | 最低版本 | 格式 |
---|---|---|
Internet Explorer | 6.0 | .cur / .ani |
Firefox (Gecko), Windows and Linux | 1.5 (1.8) | .cur / .png / .gif / .jpg |
Firefox (Gecko) | 4.0 (2.0) | .cur / .png / .gif / .jpg / .svg |
Opera | — | — |
Safari (Webkit) | 3.0 (522-523) | .cur / .png / .gif / .jpg |
拓展閱讀:《CSS 鼠標樣式 cursor屬性》 (By:歪脖先生的博客)
【06】添加彩色滾動變換字體
在你想要添加彩色滾動變換字體的地方寫入以下代碼即可,其中文字可自行更改:
<div id="binft"></div>
<script>
var binft = function (r) {
function t() {
return b[Math.floor(Math.random() * b.length)]
}
function e() {
return String.fromCharCode(94 * Math.random() + 33)
}
function n(r) {
for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
var l = document.createElement("span");
l.textContent = e(), l.style.color = t(), n.appendChild(l)
}
return n
}
function i() {
var t = o[c.skillI];
c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
}
var l = "",
o = ["青青陵上柏,磊磊澗中石。", "人生天地間,忽如遠行客。","斗酒相娛樂,聊厚不爲薄。", "驅車策駑馬,遊戲宛與洛。","洛中何鬱郁,冠帶自相索。","長衢羅夾巷,王侯多第宅。","兩宮遙相望,雙闕百餘尺。","極宴娛心意,慼慼何所迫?"].map(function (r) {
return r + ""
}),
a = 2,
g = 1,
s = 5,
d = 75,
b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
c = {
text: "",
prefixP: -s,
skillI: 0,
skillP: 0,
direction: "forward",
delay: a,
step: g
};
i()
};
binft(document.getElementById('binft'));
</script>
最終效果:
【07】添加背景音樂
打開網頁版網易雲音樂,選擇你準備添加的背景音樂,點擊生成外鏈播放器,前提是要有版權,不然是無法生成外鏈播放器的,複製底下的HTML代碼
然後將此代碼放到你想要放的地方,比如放在博客的左側,則打開 \themes\hexo-theme-spfk\layout\_partial\left-col.ejs 文件,將複製的HTML代碼粘貼進去,再進行適當的位置設置讓播放器更美觀,其中 auto=1 表示打開網頁自動播放音樂,auto=0 表示關閉自動播放音樂
這種網易雲音樂外鏈的方式有很多侷限性,因此推薦使用aplayer,GitHub地址爲:https://github.com/MoePlayer/APlayer ,參考教程:《hexo上的aplayer應用》
【08】瀏覽器網頁標題惡搞
當用戶訪問你的博客時點擊到了其他網頁,我們可以惡搞一下網頁標題,呼喚用戶回來,首先在目錄 \Hexo\themes\hexo-theme-spfk\source\js 下新建一個 FunnyTitle.js 文件,在裏面填寫如下代碼:
<!--瀏覽器搞笑標題-->
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/img/trhx2.png");
document.title = 'ヽ(●-`Д´-)ノ你醜你就走!';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/img/trhx2.png");
document.title = 'ヾ(Ő∀Ő3)ノ你帥就回來!' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
然後在 \Hexo\themes\hexo-theme-spfk\layout\layout.ejs 文件中添加如下代碼:
<!--瀏覽器搞笑標題-->
<script type="text/javascript" src="\js\FunnyTitle.js"></script>
再次部署博客後就可以看見標題搞笑的效果了:
【09】背景添加動態線條效果
在 \Hexo\themes\hexo-theme-spfk\layout\layout.ejs 文件中添加如下代碼:
<!--動態線條背景-->
<script type="text/javascript"
color="220,220,220" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>
其中:
- color:表示線條顏色,三個數字分別爲(R,G,B),默認:(0,0,0)
- opacity:表示線條透明度(0~1),默認:0.5
- count:表示線條的總數量,默認:150
- zIndex:表示背景的z-index屬性,css屬性用於控制所在層的位置,默認:-1
【10】添加人體時鐘等有趣的掛件
無意中發現了個有趣的人體時鐘 HONE HONE CLOCK,作者是個日本人,點擊此處訪問作者博客,點擊此處在作者原博客上查看動態樣式,點擊此處查看動態大圖,如果你的博客上有合適的地方,加上一個人體時鐘會很有趣的
實現代碼:
<!--人體時鐘背景透明-->
<script charset="Shift_JIS" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.js"></script>
<!–人體時鐘背景白–>
<script charset=“Shift_JIS” src=“http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.js”></script>
其他網頁小掛件推薦:
- http://abowman.com/ 裏面有很多有趣的小掛件,可以養養魚、龜、狗、倉鼠等各式各樣的虛擬寵物,能根據你的鼠標指針位置移動,直接複製代碼就可以用
- http://www.revolvermaps.com/ 它提供網站訪客地理信息,可以以2D、3D等形式顯示
- http://www.amazingcounters.com/ 免費網站計數器,有非常多的樣式供你選擇,可以設置計數器初始數值,可以設置按訪問量計數,也可以按獨立訪問者計數
- https://www.seniverse.com/widget/get 心知天氣提供基於Web的免費天氣插件,可以爲你的網站添加一項簡潔美觀的天氣預報功能,並自動適配PC和手機上的瀏覽
【11】添加網站雪花飄落效果
實現方法:在 \Hexo\themes\hexo-theme-spfk\source\js 目錄下新建一個 snow.js 文件,粘貼以下代碼:
/*樣式一*/
(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 /* 定義密集程度,數字越小越密集 */
});
});
/*樣式二*/
/* 控制下雪 */
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:60});
snow.start();
然後在 \Hexo\themes\hexo-theme-spfk\layout\layout.ejs 文件裏引用即可:
<!-- 雪花特效 --> <script type="text/javascript" src="\js\snow.js"></script> /pre>
如果沒效果,請確認網頁是否已載入JQurey,如果沒有請在下雪代碼之前引入JQ即可:
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
原文鏈接:《分享兩種聖誕節雪花特效JS代碼(網站下雪效果)》
【12】添加背景動態綵帶效果
樣式一是鼠標點擊後綵帶自動更換樣式,樣式二是飄動的綵帶:
實現方法:在 \themes\material-x\layout\layout.ejs 文件的body前面添加如下代碼:
<!-- 樣式一(鼠標點擊更換樣式) --> <script src="https://g.joyinshare.com/hc/ribbon.min.js" type="text/javascript"></script>
<!-- 樣式二(飄動的綵帶) --> <script src="https://g.joyinshare.com/hc/piao.js" type="text/javascript"></script>
【13】添加背景代碼雨特效
新建
DigitalRain.js
,寫入以下代碼:window.onload = function(){ //獲取畫布對象 var canvas = document.getElementById("canvas"); //獲取畫布的上下文 var context =canvas.getContext("2d"); var s = window.screen; var W = canvas.width = s.width; var H = canvas.height; //獲取瀏覽器屏幕的寬度和高度 //var W = window.innerWidth; //var H = window.innerHeight; //設置canvas的寬度和高度 canvas.width = W; canvas.height = H; //每個文字的字體大小 var fontSize = 12; //計算列 var colunms = Math.floor(W /fontSize); //記錄每列文字的y軸座標 var drops = []; //給每一個文字初始化一個起始點的位置 for(var i=0;i<colunms;i++){ drops.push(0); } //運動的文字 var str ="WELCOME TO WWW.ITRHX.COM"; //4:fillText(str,x,y);原理就是去更改y的座標位置 //繪畫的函數 function draw(){ context.fillStyle = "rgba(238,238,238,.08)";//遮蓋層 context.fillRect(0,0,W,H); //給字體設置樣式 context.font = "600 "+fontSize+"px Georgia"; //給字體添加顏色 context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)];//randColor();可以rgb,hsl, 標準色,十六進制顏色 //寫入畫布中 for(var i=0;i<colunms;i++){ var index = Math.floor(Math.random() * str.length); var x = i*fontSize; var y = drops[i] *fontSize; context.fillText(str[index],x,y); //如果要改變時間,肯定就是改變每次他的起點 if(y >= canvas.height && Math.random() > 0.99){ drops[i] = 0; } drops[i]++; } }; function randColor(){//隨機顏色 var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb("+r+","+g+","+b+")"; } draw(); setInterval(draw,35); };
在主題文件的相關css文件中(以 Material X 1.2.1 主題爲例,在\themes\material-x-1.2.1\source\less\_main.less 文件末尾)添加以下代碼:
canvas { position: fixed; right: 0px; bottom: 0px; min-width: 100%; min-height: 100%; height: auto; width: auto; z-index: -1; }
然後在主題的 layout.ejs 文件中引入即可:
<!-- 數字雨 --> <canvas id="canvas" width="1440" height="900" ></canvas> <script type="text/javascript" src="/js/DigitalRain.js"></script>
最終效果:
代碼來源:http://www.lxl8800.cn/Main/Resource
未完待續…